Angular Mat Radio组如何检测值变化 仅值变更时触发方法

你当前将change事件绑定在每个单独的mat-radio-button上，才会出现重复点击已选中选项仍触发回调的问题：单个单选按钮的change事件只要按钮被点击就会触发，不会校验单选组整体的选中值是否发生实际变化。

mat-radio-group本身提供了change事件，该事件仅当单选组的选中值和上一次值不一致时才会触发，完全匹配你需要的“值实际变更才执行业务逻辑”的需求，重复点击已选中的选项不会触发该事件。
你只需要把change事件从内部的mat-radio-button移到外层的mat-radio-group上即可，不需要额外写值比对逻辑。

HTML模板 #

<mat-radio-group
  [(ngModel)]="filters"
  aria-label="Select an option"
  [disabled]="isLoading"
  (change)="onChange($event)"
>
  <mat-radio-button value="1">
    A
  </mat-radio-button>
  <mat-radio-button value="2">
    B
  </mat-radio-button>
</mat-radio-group>

TS逻辑 #

import { MatRadioChange } from '@angular/material/radio';

export class Something {
    filters: string = '1'; // 建议设置初始默认值，避免初始状态值为undefined
    isLoading = false;
    
    onChange(event: MatRadioChange) {
      if (this.isLoading) {
        return;
      }
      this.table.pageIndex = 0;
      // 由于已经用ngModel做了双向绑定，不需要手动给filters赋值，值会自动同步
      event.value === '2' ? this.callAllData() : this.callMyData();
    }
}

如果你使用的Angular Material版本存在特殊兼容问题，可以手动增加一层值比对兜底：提前缓存上一次的选中值，在事件回调中对比新值和缓存值，只有值不一致时才执行业务逻辑，执行完后更新缓存值即可。正常版本下绑定到mat-radio-group的change事件已经自带这个判断，不需要额外实现。

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