nz-switch 由于更新值而无法正常工作

Question

<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(''),

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

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

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

我尝试使用

nz-switch

进行更新并成功更新，但如果开关更新为“否”，则开关按钮不起作用。它应该关闭，但始终开启。

Answer 1

我怀疑的是，可观察到的

foodHygieneLink

值可能是“是”或“否”，而不是布尔值。

因此，当值为

<nz-switch>

时，

No

将被设置为打开。

您可以通过在将值设置为

foodHygieneLink

FormControl 之前将“是”或“否”转换为布尔值来解决此问题。

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

演示@StackBlitz