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'），并在*ngIf标签中使用<option>：

<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。

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

2 个答案: