执行更新操作时无法绑定已勾选的checkbox复选框如何解决

• 框架基础依赖缺失：如果使用Angular框架开发，未在对应模块中导入FormsModule，会导致[(ngModel)]双向绑定语法失效，复选框勾选状态无法同步到组件变量
• 字段映射不匹配：复选框checked属性或者双向绑定的字段，和更新操作返回数据里的选中标识字段名不一致，比如模板绑定的是isChecked，但接口返回的选中字段是selected，赋值不对应导致状态无法回显
• 变更检测未触发：更新操作是异步请求，拿到返回数据赋值后，框架的自动变更检测没有触发，视图层没有同步最新的勾选状态
• 列表引用未更新：复选框通过*ngFor循环渲染时，仅修改数组内部对象的勾选属性、没有变更数组本身的引用，框架默认不会触发列表重绘，导致勾选状态不更新

• 补全基础依赖配置
  在对应功能模块的module.ts文件中导入FormsModule，模板内的复选框使用正确的双向绑定写法：

<input type="checkbox" [(ngModel)]="item.isChecked" name="check_{{item.id}}">

• 统一字段映射
  更新请求拿到返回数据后，统一把选中标识赋值给绑定的对应字段：

// 接口返回数据后做字段映射
this.checkList = res.data.map(item => ({
  ...item,
  isChecked: item.selected || false
}))

• 手动触发变更检测
  异步更新后状态未同步的场景，可引入ChangeDetectorRef手动触发视图更新：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

fetchUpdateData() {
  this.apiService.getDetail(id).subscribe(res => {
    this.checkList = res.data;
    this.cdr.detectChanges();
  })
}

• 变更数组引用触发重绘
  循环渲染场景下，修改完勾选属性后可以生成新的数组引用，触发列表重绘：

// 修改属性后重新赋值数组，变更引用
this.checkList = [...this.checkList];

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