单选按钮变更触发代码需双击生效，求无setTimeout解决方案

问题背景 #

自定义单选按钮组件的valueChanged事件触发时，直接从表单控件取值会拿到旧值，必须双击才能更新payAttributes对应的值。目前通过setTimeout延迟3秒可以解决，但希望找到更合理的替代方案。

现有代码 #

TS代码（原版本）

partyTypeChanged (index: number) {
  this.payAttributes[index].partyType = this.testForm.get('payReasons')['controls'][index].get('partyType').value;
}

HTML代码

<form-radio
  formControlName="partyType"
  [formStatus]="testForm.formErrors.payReasons[i]"
  [parentFormGroup]="payReasonForm"
  [data]="{
    name: 'partyType',
    label: 'party type',
    options: [
      {
        name: individualThirdPartyValue,
        label: 'individual'
      },
      {
        name: entityThirdPartyValue,
        label: 'business'
      }
    ]
  }"
  (valueChanged)="partyTypeChanged(i)">
</form-radio>

<p *ngIf="payAttributes[i].partyType === individualPartyValue">individual</p>
<p *ngIf="payAttributes[i].partyType === entityPartyValue">business</p>

临时解决方案（使用setTimeout）

partyTypeChanged (index: number) {
  setTimeout(()=>{
    this.payAttributes[index].partyType = this.testForm.get('payReasons')['controls'][index].get('partyType').value;
  }, 3000); 
}

根本原因 #

valueChanged事件的触发时机早于Angular表单控件的内部值更新逻辑，导致直接取值时拿到的是变更前的旧值，双击时才会获取到上一次变更后的正确值。

替代解决方案 #

方案1：直接从事件参数获取最新值 #

自定义单选组件的valueChanged事件通常会传递选中的最新值，直接接收这个参数即可，无需从表单中二次取值：

修改TS方法：

partyTypeChanged(index: number, newValue: string) {
  this.payAttributes[index].partyType = newValue;
}

修改HTML中的事件绑定：

(valueChanged)="partyTypeChanged(i, $event)"

方案2：监听表单控件的valueChanges #

绕过组件的valueChanged事件，直接监听表单控件的值变化，这是Angular表单更推荐的做法：

如果payReasons是FormArray，可以整体监听：

// 在组件初始化时添加监听
ngOnInit(): void {
  const payReasonsArray = this.testForm.get('payReasons') as FormArray;
  payReasonsArray.valueChanges.subscribe((reasons) => {
    reasons.forEach((reason, index) => {
      this.payAttributes[index].partyType = reason.partyType;
    });
  });
}

如果需要针对单个控件监听（比如动态添加控件时）：

// 假设在添加新的支付理由控件时
addPayReason(): void {
  const payReasonsArray = this.testForm.get('payReasons') as FormArray;
  const newGroup = this.fb.group({
    partyType: [null]
  });
  payReasonsArray.push(newGroup);
  
  const newIndex = payReasonsArray.length - 1;
  newGroup.get('partyType')?.valueChanges.subscribe((value) => {
    this.payAttributes[newIndex].partyType = value;
  });
}

方案3：强制触发变更检测（兜底方案） #

如果以上两种方法无法实现，可以强制触发变更检测，但不推荐作为首选：

首先注入ChangeDetectorRef：

constructor(private cdr: ChangeDetectorRef) {}

然后修改方法：

partyTypeChanged(index: number) {
  this.cdr.detectChanges(); // 先触发变更检测，确保表单值已更新
  this.payAttributes[index].partyType = this.testForm.get('payReasons')['controls'][index].get('partyType').value;
}

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