使用下拉列表中的屬性值過濾對象數組 - Angular 模板

Question

我正在嘗試使用屬性值過濾對象數組並在下拉列表中顯示過濾結果。 這是我的 JSON 結構：

 var profiles = [{ "name":"Pavan", "exp": 2, "subject":"maths" }, { "name":"Mark", "exp": 6, "subject":"science" }, { "name":"sunny", "exp": 1, "subject":"maths" }, { "name":"Roy", "exp": 2, "subject":"science" }]

在這里，我想在主題是數學的下拉列表中顯示名稱。 我可以在 ts 文件中進行過濾，也可以在下拉列表中顯示，但我想在模板中自行進行過濾部分。 現在我用下面的代碼顯示所有名稱。

 <select name="profile" class="bx--text-input" [formControl]="profile"> <option value="" selected>Select profile name</option> <option [value]="state.name" *ngFor="let state of profiles">{{state.name}}</option> </select>

因此，如果我只想顯示數學科目，如何在模板文件中進行過濾。

Answer 1

 <select name="profile" class="bx--text-input" [formControl]="profile"> <option value="" selected>Select profile name</option> <ng-container *ngFor="let state of profiles;"> <option [value]="state.name" *ngIf="state.subject =='maths'"> {{ state.name }} </option> </ng-container> </select>