如何在mat-select多选的selectionChange事件中识别并忽略‘All’选项

方案一：通过点击事件标记区分“All”操作 #

利用“All”选项的点击事件设置临时标记，在selectionChange回调中根据标记判断是否忽略该事件，处理完成后重置标记：

1. 在组件类中添加临时状态变量：

private isAllOptionClicked = false;

2. 修改toggleMultiAll方法，标记本次操作是点击了“All”选项：

toggleMultiAll(isSelected: boolean) {
  this.isAllOptionClicked = true;
  // 保留你的全选/取消全选逻辑，示例：
  // if (isSelected) {
  //   this.selectCtrl.setValue([this.allSelectOption, ...this.filteredOptions]);
  // } else {
  //   this.selectCtrl.setValue([]);
  // }
}

3. 更新onSelectionChange方法，忽略“All”相关的操作：

onSelectionChange(event) {
  if (this.isAllOptionClicked) {
    this.isAllOptionClicked = false; // 重置标记
    return;
  }

  // 额外处理手动选中“All”的情况（非点击All选项触发）
  const hasAllOption = event.value.some(opt => opt === this.allSelectOption);
  if (hasAllOption) {
    return;
  }

  this.selectedOptions$.next(event.value);
}

方案二：通过选中项差异判断操作对象 #

对比事件前后的选中项集合，找出本次操作新增或移除的选项，判断是否包含“All”选项：

1. 在组件类中保存上一次的选中状态：

private previousSelectedOptions: any[] = [];

2. 重写onSelectionChange方法：

onSelectionChange(event) {
  const currentSelected = event.value;
  // 计算本次操作中新增或移除的选项
  const changedOptions = [
    ...currentSelected.filter(opt => !this.previousSelectedOptions.includes(opt)),
    ...this.previousSelectedOptions.filter(opt => !currentSelected.includes(opt))
  ];

  // 判断变化的选项是否包含“All”
  const isAllOptionChanged = changedOptions.some(opt => opt === this.allSelectOption);

  if (isAllOptionChanged) {
    this.previousSelectedOptions = currentSelected;
    return;
  }

  this.selectedOptions$.next(currentSelected);
  this.previousSelectedOptions = currentSelected;
}

注意事项 #

• 确保allSelectOption与其他选项对象对比时是同一引用，避免因对象浅比较失败导致判断错误。
• 方案一更适合依赖“All”选项点击事件的场景，方案二更适合需要监听所有选中状态变化的场景。

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