Angular中mat-select的(selectionChange)事件仅触发一次的问题求助

嘿，我太懂你这个困扰了！用Angular Material的mat-select做多选下拉时，(selectionChange)确实只会在选中集合发生实际变化的时候才触发——也就是当你选了新的未选选项，或者取消了已选选项时才会有响应；但如果重复点击同一个已选中的选项（这时候选中集合其实没变化，只是点了同一个元素），事件就不会触发，这是组件的默认设计逻辑。

要解决这个问题，让每次点击选项（哪怕是重复点击同一个）都能触发你的处理逻辑，有个很直接的办法：直接给每个mat-option绑定(click)事件，手动控制选中状态和业务逻辑，绕开selectionChange的限制。

给你举个具体的示例：

首先是模板代码：

<mat-select [value]="selectedOptions" multiple>
  <mat-option 
    *ngFor="let option of availableOptions" 
    [value]="option" 
    (click)="onOptionClicked(option)"
  >
    {{ option.label }}
  </mat-option>
</mat-select>

然后是对应的TS代码：

import { Component } from '@angular/core';

interface SelectOption {
  value: string;
  label: string;
}

@Component({
  selector: 'app-select-demo',
  templateUrl: './select-demo.component.html'
})
export class SelectDemoComponent {
  selectedOptions: SelectOption[] = [];
  availableOptions: SelectOption[] = [
    { value: 'opt1', label: '选项1' },
    { value: 'opt2', label: '选项2' },
    { value: 'opt3', label: '选项3' }
  ];

  onOptionClicked(option: SelectOption) {
    const optionIndex = this.selectedOptions.findIndex(item => item.value === option.value);
    
    if (optionIndex > -1) {
      // 选项已选中，移除
      this.selectedOptions.splice(optionIndex, 1);
    } else {
      // 选项未选中，添加
      this.selectedOptions.push(option);
    }

    // 这里执行你原本要在selectionChange里做的逻辑
    this.processSelection();
  }

  processSelection() {
    console.log('当前选中项：', this.selectedOptions);
    // 你的业务处理代码写在这
  }
}

这个方法的核心是：每次点击mat-option时，手动判断该选项是否在选中数组里，然后更新选中状态，紧接着触发你的业务逻辑。这样不管用户点击的是已选中还是未选中的选项，每次点击都会执行你需要的操作，完美解决selectionChange不触发的问题。

需要注意的是：这里我没有用[(value)]双向绑定，而是手动维护selectedOptions数组，避免双向绑定和手动操作之间出现状态不一致的情况。如果你习惯用双向绑定，也可以保留，但要确保手动更新数组的逻辑和绑定的状态同步。

备注：内容来源于stack exchange，提问作者Yogesh