文章/答案/技术大牛

发布

社区首页 >问答首页 >如何正确使用ngIf内部的ngFor。(角)

问如何正确使用ngIf内部的ngFor。(角)
EN

Stack Overflow用户

提问于 2022-11-04 05:09:48

回答 1查看 51关注 0票数 1

  <label for="bank_id">Bank</label>
     <select class="browser-default custom-select custom-select-sx col-md-12 mb-auto" (change)="selectedBank($event)">
             <option selected>Select Bank</option>
             <option value="{{ bankData.id }}" *ngFor="let bankData of bankDetails; let i = index">
                 {{  bankData.country_name}}
             </option>
     </select>

我获得银行Id并将Id设置为selectdBank变量

 selectedBank(event: any) {
    this.seletedbank = event.target.value;
 }

我想把银行的详细资料显示给那套身份证。

<div *ngFor ="let bankData of bankDetails">
    <div *ngif="bankData.id == seletedbank">
        <h6 class="text-center font-weight-bold">
            {{ bankData.country_name}} - Bank Details
        </h6>
    </div>
</div>

ngIf不起作用。如何获得与选择的银行id相关的数据。

angular-ng-if

data-retrieval

angular-changedetection

angular-ngfor

angular

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-11-04 07:29:19

这不是答案，只是“做得更好”

使用两种方式绑定(ngModel)

//in .ts you declare
selectedbank:any=null

<!--see you need not use (change)-->
<select [(ngModel)]="seletedbank">
     <!--not use selected, you can use-->
       <option [value]="null" hidden disabled>Select Bank</option>
       <!--see the use of "binding" [value], better than "interpolation"-->
       <option *ngFor="let bankData of bankDetails" [value]="bankData.id" >
              {{  bankData.country_name}}
       </option>
</select>
<div *ngFor ="let bankData of bankDetails">
   <!--you can use *ngIf in any "tag", not only in a div-->
   <h6 ngIf="bankData.id == seletedbank" class="text-center font-weight-bold">
      {{ bankData.country_name}} - Bank Details
   </h6>
</div>

顺便说一句，真的迫使角度来循环以显示一个独特的值--这不是很有效。所以使用另一个变量

<!--"split"  the [(ngModel)] in [ngModel] and (ngModelChange)
    to call a function when a change happens -->
<select [ngModel]="seletedbank" 
        (ngModelChange)="selectedbank=$event;getData($event)>
  ....
</select>
<h1>{{bankDetail?.country_name}}</h1>

//declare a variable
bankDetail:any=null;
getData(id:any){
   this.bankDetail=this.bankDetails.find((x:any)=>x.id==id)
}

一次解释一下ngModel，我建议另一种方法:在变量获得全部值的方式中使用select with ngValue

//in .ts you declare
selectedbank:any=null

<select [(ngModel)]="seletedbank">
       <option [value]="null" hidden disabled>Select Bank</option>
       <!--see the use of "binding" [ngValue] to all the object-->
       <option *ngFor="let bankData of bankDetails" [ngValue]="bankData" >
              {{  bankData.country_name}}
       </option>
</select>
<h1>{{seletedbank?.country_name}}</h1>

以这种方式看到变量seletedbank获取整个对象。如果没有选择，则使用"selectedbank“和".country_name”之间的安全运算符.country_name来避免出现错误。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74312494

复制

相似问题

问如何正确使用ngIf内部的ngFor。(角)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确使用ngIf内部的ngFor。(角)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确使用ngIf内部的ngFor。(角)
EN