Working Example

Question

我正在尝试根据选项列表填充条件。我正在使用的HTML组件是：

<div class="select">
    <select name="credentialsName" ngModel required>
        <option *ngFor='let credential of credentials' *ngIf="credential.type==='MACHINE'" [value]="credential.name">{{credential.name}}</option>
    </select>
</div>

我收到语法错误：Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with *。是否可以根据选项列表中的条件显示选项下拉列表？

Answer 1

不能在同一元素中同时使用* ngFor和* ngIf。您需要在* ngFor中使用过滤器。

检查此线程以获取更多详细信息 How to apply filters to *ngFor

Answer 2

因为不能在单个元素上同时使用两个指令，因为一次只能在一个元素上使用一个结构指令。

为了实现，您可以使用<ng-container>

<ng-container *ngFor='let credential of credentials' >
        <option [value]="credential.type" *ngIf="credential.type==='MACHINE'">
            {{credential.type}}
          </option>
      </ng-container>

从选项列表中根据条件填充选项

2 个答案:

Working Example