使用angular5中的* ngFor獲得特定值

Question

我獲得的json響應的格式為：

0：{類型：“ bt”，項目名稱：“ tab1”}

1：{類型：“ st”，項目名稱：“ tab2”}

我將此響應存儲在data2中，然后按以下代碼所示打印數據：

<div class="form-group" >
<label>Item Name</label>
<select class="custom-select">
<option *ngFor="let data of data2; let i = index;" value = {{i}} >
                                                    {{data.ItemName}}
</option>
</select>
</div>

這是從data2獲取所有ItemName的值。

但是我想檢查data2中type的值，然后打印特定的ItemName。 因此，如果我選擇類型為“ st”，那么我只希望在下拉列表中提供屬於該類型的所有ItemName。

我怎樣才能做到這一點？

Answer 1

您可以將其包裝在<ng-container> ，將所選值存儲在變量中（假設myType='bt' ），並在<option>標記中使用*ngIf ：

<select class="custom-select">
  <ng-container *ngFor="let data of data2; let i = index;"> 
     <option value={{i}} *ngIf="data.type===myType">                                                    
       {{data.ItemName}}
     </option>
  </ng-container>
</select>

Answer 2

為此，您需要同時執行*ngFor和*ngIf操作，但是我們不能在同一元素上使用它們。

從DOCS ：

您只能對一個元素應用一個結構指令

但是您可以創建一個附加的<ng-container>...</ng-container>元素，如下所示：

<select class="custom-select">
  <ng-container *ngFor="let data of data2; let i = index;">
    <option *ngIf="data.type === selectedType">
      {{data.ItemName}}
    </option>
  </ng-container>
</select>

並且，如果將目標類型存儲到selectedType類屬性中，則它應該起作用： *ngIf="data.type === selectedType"將過濾並僅顯示具有指定類型的元素。

這是一個STACKBLITZ 。