<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;
}
我想向該集合 id 顯示銀行詳細資訊
<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 相關的資料。
uj5u.com熱心網友回復：
這不是答案，只是“做得更好”
使用兩種方式系結 [(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>
順便說一句，真的迫使 Angular 回圈顯示一個獨特的價值，它不是很有效。所以使用另一個變數
<!--"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，我建議另一種方法：在變數獲取完整值的方式中使用帶有[ngValue]的select
//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”之間使用安全運算子以不給出錯誤。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/527717.html
標籤：有角度的角度ng-if数据检索角度变化检测角度ngfor
上一篇：在AWS上部署后端和前端