angular - 如何在 Angular Mat-Select 中动态禁用特定选项

Question

我有一个列表，其中一个对象有 name和id属性:

[
  {
    "name": "open",
    "id": "1"
  },
  {
    "name": "inprogress",
    "id": "2"
  },
  {
    "name": "close",
    "id": "3"
  }
]

并使用 MatSelect 和 *ngFor 来迭代数组，并使用 [(ngModel)] 将当前状态与 select 绑定(bind).

预期输出:

如果当前状态是inprogress然后禁用open选项

StackBlitz Example

Answer 1

该示例无法正常工作，因为 selected与 [value]="topping.id" 绑定(bind)，但逻辑使用 selected.id除了启动时它不存在，因为您正在初始化 selected与顶部物体。

此外，逻辑 [disabled]="topping.id < selected.id"可能有缺陷，因为它还会禁用 inprogress当close已选择 - 您可能想要 - 我不确定 - 但您只是说您想禁用 open当inprogress已选择。

使用[value]="topping" :

<mat-form-field>
    <mat-select placeholder="Toppings" [(ngModel)]="selected" [formControl]="toppings">
        <mat-option *ngFor="let topping of list" [value]="topping" [disabled]="selected.id === '2' && topping.id === '1'">{{topping.name}}</mat-option>
    </mat-select>
</mat-form-field>

或者改变selected的逻辑和初始化:

selected: any =  '2';

<mat-form-field>
    <mat-select placeholder="Toppings" [(ngModel)]="selected" [formControl]="toppings">
        <mat-option *ngFor="let topping of list" [value]="topping.id" [disabled]="selected === '2' && topping.id === '1'">{{topping.name}}</mat-option>
    </mat-select>
</mat-form-field>

Angular v6/7 及更高版本的更新

使用[(value)]而不是[(ngModel)] 。 Angular v6 中已弃用对使用 ngModel 输入属性和 ngModelChange 事件与响应式(Reactive)表单指令的支持，并在 Angular v7 中删除。