mat-radio-button绑定[checked]后(change)事件无法触发问题咨询

你的实现存在两处核心冲突，导致change事件无法正常触发：

1. 状态管理逻辑冲突：mat-radio-group已经绑定了响应式表单的formControlName，Material组件本身会通过FormControl的值自动管理单选框的选中状态，你额外给每个mat-radio-button绑定[checked]属性，会覆盖组件内部的状态管理逻辑，导致事件触发机制异常。
2. 模板绑定方法存在副作用：你将isTwiceInstallment()方法绑定到了模板属性上，Angular每轮变更检测都会执行这个方法，而方法内部直接调用setValue修改FormControl的值，会直接覆盖你点击单选框产生的状态变更，相当于你刚选中某个选项，变更检测立刻把值改回了isTwiceInstallment计算的结果，自然看不到change事件生效。

按以下步骤调整代码即可：

1. 删除所有mat-radio-button上的[checked]绑定，选中状态完全交由FormControl管理
2. 把初始化选中状态的逻辑从isTwiceInstallment()中抽离，仅在初始化、或者依赖的金额参数变化时执行一次，避免每轮变更检测都修改表单值
3. 优化isTwiceInstallment()为纯计算方法，不要在内部修改组件状态，避免副作用

修改后TS代码 #

ngOnInit() {
  // 原有初始化逻辑
  // 加载完成后初始化单选框选中状态
  this.initRadioStatus();
}

// 抽离的初始化逻辑，仅在需要更新状态时调用
initRadioStatus() {
  const overPaidAmount = this.transactionTotal - +this.nextPayment;
  const isOverPaid = overPaidAmount > 0.00;
  const isTwoTimesInstallment = this.transactionTotal >= (2 * +this.nextPayment);
  if (isTwoTimesInstallment && isOverPaid) {
    this.form.get('anticipatedPaymentOrInstallmentAdvance').setValue('ANTICIPATED_PAYMENT');
    this.disableAnticipatedPaymentDropDown = false;
  } else {
    this.form.get('anticipatedPaymentOrInstallmentAdvance').setValue('INSTALLMENT_ADVANCE');
    this.disableAnticipatedPaymentDropDown = true;
  }
}

// 纯计算方法，无副作用，其他地方需要用到可以保留，没用可以删除
isTwiceInstallment(): boolean {
  const overPaidAmount = this.transactionTotal - +this.nextPayment;
  const isOverPaid = overPaidAmount > 0.00;
  const isTwoTimesInstallment = this.transactionTotal >= (2 * +this.nextPayment);
  return isTwoTimesInstallment && isOverPaid;
}

// change事件可简化，FormControl会自动更新值，无需手动调用setValue
radioButtonOnChange(event: any) {
  this.disableAnticipatedPaymentDropDown = event.value === 'ANTICIPATED_PAYMENT';
}

修改后HTML代码 #

<mat-radio-group (change)="radioButtonOnChange($event)" formControlName="anticipatedPaymentOrInstallmentAdvance">
  <td td-data-table-cell>
    <mat-radio-button id='anticipatedPayment' value="ANTICIPATED_PAYMENT">
      {{ 'Anticipated Payment' | translate }}
    </mat-radio-button>
  </td>
  <td td-data-table-cell>
    <mat-radio-button id='installmentAdvance' value="INSTALLMENT_ADVANCE" [disabled]="disableInstallmentAdvance">
      {{ 'Installment Advance' | translate }}
    </mat-radio-button>
  </td>
</mat-radio-group>

如果transactionTotal、nextPayment两个参数是动态变化的，你可以监听这两个值的变更，变化时调用initRadioStatus()方法更新选中状态即可，不要绑定到模板属性上反复执行。

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