不要在Angular中选择Dropdown中的另一个值

Question

我有一个简单的问题。有没有办法，如果我可以从下拉列表中选择一个值，然后当我添加另一行时，无法再选择所选的下拉值？只有未选中的值才能在下拉列表中找到？这是我下面的stackblitz的链接：

https://stackblitz.com/edit/form-array-patch-mtiiee?file=app/app.component.ts

<div class="col-sm-12">
    <select class="form-control" formControlName="ingredientData">
        <option value="null" hidden>-- Select Ingredient --</option>
        <option *ngFor="let ingredient of ingredients" [ngValue]="ingredient">
            {{ingredient.name}}
        </option>
    </select>
</div>

Answer 1

您可以检查表格rows表单数组的值是否已选中当前选项，并将disabled设置为相应的选择选项。

<option *ngFor="let ingredient of ingredients" [ngValue]="ingredient" [disabled]="isSelected(ingredient)">

isSelected(ingredientData) {
  return this.addForm.get('rows').value.find(item => ingredientData === item.ingredientData);
}

参考 example 。