nz-switch更新值后状态异常：设为No时始终处于开启状态

使用nz-switch组件执行更新操作时，数据更新成功，但当开关值更新为"No"时，按钮始终保持开启状态，不符合预期（本该关闭）。

相关代码 #

HTML代码 #

<form [formGroup]="businessFoodHygieneForm">
  <div class="box p-4 d-flex jc-between ai-center">
     <span>
        Food Hygiene Link
     </span>
     <label>
      <nz-switch
      class="switch-middle ms-2"
      formControlName="foodHygieneLink"
      (ngModelChange)="onFoodHygieneChange($event)">
      </nz-switch>
  </label>
 </div>
</form>

TS组件代码 #

foodHygieneLink: new FormControl(''),

this.businessFoodHygieneForm.patchValue({
  foodHygieneLink:
    selectedBusiness?.foodHygieneLink,
});

onFoodHygieneChange(status: boolean): void {
    this.foodHygieneLink = status;

    const body = { foodHygieneLink: status ? 'Yes' : 'No' };

    this.bizStore.dispatch(
       businessAction.updateBusiness({
          body: body,
          bid: this.bid,
       })
     );
   }

解决方案 #

问题根源 #

1. 表单控件类型不匹配：foodHygieneLink FormControl初始化为字符串类型，但nz-switch本质绑定的是布尔值，导致值解析异常。
2. 初始值转换错误：后端返回的是"Yes"/"No"字符串，直接patch到表单控件时，nz-switch无法将字符串映射为正确的开关状态。
3. 表单值未同步更新：onFoodHygieneChange中直接给变量赋值，没有更新表单控件的value，导致视图和控件值不同步。

修改后的TS代码 #

// 初始化表单控件为布尔类型
foodHygieneLink: new FormControl(false),

// 初始化时将后端的"Yes"/"No"转换为布尔值
this.businessFoodHygieneForm.patchValue({
  foodHygieneLink: selectedBusiness?.foodHygieneLink === 'Yes',
});

onFoodHygieneChange(status: boolean): void {
    // 更新表单控件的值，确保视图同步
    this.businessFoodHygieneForm.get('foodHygieneLink')?.setValue(status);

    const body = { foodHygieneLink: status ? 'Yes' : 'No' };

    this.bizStore.dispatch(
       businessAction.updateBusiness({
          body: body,
          bid: this.bid,
       })
     );
   }

说明 #

• 表单控件初始化为布尔值，匹配nz-switch的绑定类型。
• 初始化时把后端返回的字符串转换成对应的布尔值（"Yes"→true，其他→false），让开关正确识别初始状态。
• 在onFoodHygieneChange中通过表单控件的setValue方法更新值，确保视图和表单数据同步。

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