如何解决Angular mat-slide-toggle与mat-checkbox视觉状态不更新问题

问题根源 #

1. 类型不匹配：你接口定义中onlineOnly、display字段为number类型（1/0），但mat-slide-toggle组件仅会根据布尔值true/false更新视觉选中状态，直接传入数字会导致UI和表单值不同步。
2. 表单用法冲突：你同时混用了响应式表单的formControlName和模板驱动表单的[(ngModel)]，两种表单管理逻辑会互相干扰，导致状态同步异常，额外定义的onlineOnlyChecked、displayChecked变量完全没有必要。
3. 不需要使用getElementById操作DOM，Angular响应式表单本身就支持自动同步UI和表单状态，只要参数符合组件要求即可。

修复步骤 #

1. 修改HTML模板，移除多余的ngModel和事件绑定，仅保留formControlName即可：

<mat-slide-toggle formControlName="onlineOnly">Online Only</mat-slide-toggle>
<mat-slide-toggle formControlName="display">Display</mat-slide-toggle>

2. 修改TS赋值逻辑，给表单赋值时将1/0转换为布尔值：

getCollectionSelected() {
  if (!this.selectedCollection) return
  this.collectionUpdateForm.setValue({
    languageID: this.selectedCollection.languageID,
    categoryID: this.selectedCollection.categoryID,
    collectionID: this.selectedCollection.collectionID,
    collectionName: this.selectedCollection.collectionName,
    eventName: this.selectedCollection.eventName,
    collectionDesc: this.selectedCollection.collectionDesc,
    productID: this.selectedCollection.productID,
    // 数字转布尔值，1对应true、0对应false
    onlineOnly: !!this.selectedCollection.onlineOnly,
    display: !!this.selectedCollection.display
  })
}

3. 可选：提交表单时转换回数字格式，如果后端要求接收1/0格式，提交时做一次转换即可：

updateCollectionData(formValue) {
  const submitData = {
    ...formValue,
    onlineOnly: formValue.onlineOnly ? 1 : 0,
    display: formValue.display ? 1 : 0
  }
  // 后续将submitData传给后端接口
}

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