如何实现选中mat-select的‘All Pokemon’时禁用两个下拉框的其余选项？

1. 调整TS中的禁用判断逻辑 #

在组件类中增加对“All Pokemon”选中状态的判断，同时修改原有的disable和disable1方法，整合新的禁用规则：

// 判断是否选中了"All Pokemon"
get isAllPokemonSelected(): boolean {
  return this.select1.includes('All Pokemon');
}

disable(obj: string): boolean {
  // 规则1：选中"All Pokemon"时，除它自身外的所有Select1选项禁用
  if (this.isAllPokemonSelected) {
    return obj !== 'All Pokemon';
  }
  // 原有规则：被Select2选中的选项禁用
  return this.select2.indexOf(obj) !== -1;
}

disable1(obj: string): boolean {
  // 规则1：选中"All Pokemon"时，Select2的所有选项禁用
  if (this.isAllPokemonSelected) {
    return true;
  }
  // 原有规则：被Select1选中的选项禁用
  return this.select1.indexOf(obj) !== -1;
}

2. 优化选中“All Pokemon”时的交互（可选） #

为避免选中“All Pokemon”后，Select2残留已选中项导致逻辑冲突，可以在select1变化时自动清空Select2的选中值：

onSelect1Change(selectedValues: string[]) {
  if (selectedValues.includes('All Pokemon')) {
    this.select2 = [];
  }
}

对应的HTML中给Select1的mat-select添加(selectionChange)事件：

<mat-select [(value)]="select1" multiple (selectionChange)="onSelect1Change($event.value)">
  <!-- 原有选项内容保持不变 -->
</mat-select>

效果说明 #

• 当Select1选中“All Pokemon”时：
  • Select1内除“All Pokemon”外的所有选项被禁用
  • Select2的所有选项被禁用，且已选中内容会被自动清空（可选优化）
• 取消选中“All Pokemon”后，所有选项恢复原有禁用规则（即互相选中的选项会被对方下拉框禁用）

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