我有一个列表,其中一个对象有 name
和id
属性:
[
{
"name": "open",
"id": "1"
},
{
"name": "inprogress",
"id": "2"
},
{
"name": "close",
"id": "3"
}
]
并使用 MatSelect 和 *ngFor 来迭代数组,并使用 [(ngModel)]
将当前状态与 select 绑定(bind).
预期输出:
如果当前状态是inprogress
然后禁用open
选项
最佳答案
该示例无法正常工作,因为 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 中删除。
关于angular - 如何在 Angular Mat-Select 中动态禁用特定选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51551435/