Angular Material mat-select：重选默认值时selectionChange不触发

问题原因 #

你遇到的selectionChange事件在切回默认值时不触发，核心原因是当前绑定的是字符串类型的selectedMainFilter.value，Angular Material的mat-select内部通过字符串相等性判断值是否变化：当从其他选项切回默认值时，若代码逻辑中未正确触发值的变更检测，或组件内部误判值未发生变化，就会导致事件不触发。另外，绑定对象属性而非对象本身，也可能干扰变更检测的准确性。

解决方案 #

方案1：绑定完整选项对象（推荐） #

将mat-select的绑定目标改为整个MainFilterElement对象，通过对象引用的差异触发事件，彻底避免字符串比对的问题：

修改后的HTML代码

<mat-form-field appearance="fill">
  <mat-label>{{ 'filterprojects.showas' | translate }}</mat-label>
  <mat-select [(value)]="selectedMainFilter" (selectionChange)="onMainFilterChange()">
    <mat-option [value]="option" *ngFor="let option of mainFilters">
      {{ 'filterprojects.' + option.viewValue | translate }}
    </mat-option>
  </mat-select>
</mat-form-field>

组件代码（无需修改默认选中逻辑）

selectedMainFilter: MainFilterElement = this.mainFilters[2]; // 保持默认选中月度

这种方式下，每次选择不同选项时，selectedMainFilter会切换为对应的对象实例，无论是否是默认选项，selectionChange事件都会正常触发。

方案2：手动处理值变更（兼容原绑定逻辑） #

若不想改变绑定方式，可放弃双向绑定语法[(value)]，手动绑定[value]和(valueChange)，明确捕获值的变化：

修改后的HTML代码

<mat-form-field appearance="fill">
  <mat-label>{{ 'filterprojects.showas' | translate }}</mat-label>
  <mat-select [value]="selectedMainFilter.value" (valueChange)="onMainFilterChange($event)">
    <mat-option [value]="option.value" *ngFor="let option of mainFilters">
      {{ 'filterprojects.' + option.viewValue | translate }}
    </mat-option>
  </mat-select>
</mat-form-field>

修改后的组件方法

public onMainFilterChange(newValue: string) {
  this.selectedMainFilter.value = newValue;
  console.log("筛选器已切换为：", newValue);
}

通过valueChange事件明确监听值的变更，即使切回默认值，只要值从其他字符串变回默认字符串，事件就会触发。

验证建议 #

可在事件方法中打印当前选中值，快速排查事件是否触发：

public onMainFilterChange() {
  console.log("当前选中值：", this.selectedMainFilter.value);
}

内容的提问来源于stack exchange，提问作者P. Dörr