如何根据特定mat-option的选中状态启用/禁用输入字段？

核心逻辑是只判断「Mushroom」是否在已选中的选项列表里，而非监听所有选项的变化来切换输入框状态，具体修改如下：

模板文件修改 #

找到输入框的代码，把原来的[disabled]绑定逻辑替换成直接检查选中数组是否包含「Mushroom」：

<input type="text" [disabled]="!selectedOptions.includes('Mushroom')">

TS文件修改 #

删掉原来用来控制状态的isDisabled变量以及对应的切换逻辑，只保留选中选项的数组即可，示例代码：

export class SelectMultipleExample {
  toppings = new FormControl('');
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
  selectedOptions: string[] = [];

  onSelectionChange(event: MatSelectChange) {
    this.selectedOptions = event.value;
  }
}

逻辑说明 #

修改后，输入框的启用/禁用状态仅由「Mushroom」的选中状态决定：

• 当「Mushroom」被选中时，selectedOptions.includes('Mushroom')返回true，!true为false，输入框解除禁用
• 当「Mushroom」未被选中时，selectedOptions.includes('Mushroom')返回false，!false为true，输入框保持禁用
  其他选项的选中或取消操作不会影响输入框的状态

内容的提问来源于stack exchange，提问作者Ionut