Angular中[(ngModel)]绑定复选框出现全选/全消问题的解决方案咨询

嘿，我之前也碰到过一模一样的坑！问题出在你给所有复选框设置了同一个name属性——name="accountSetup"。Angular在处理ngModel绑定的时候，会把相同name的表单控件归为同一组，所以你点一个，所有的都会跟着同步状态。

修复步骤： #

• 给每个复选框设置唯一的name值，可以用循环项的唯一标识（比如accountSetup.id）或者循环索引index来生成
• 另外推荐给*ngFor加上trackBy，提升性能的同时也能避免一些奇怪的渲染问题

修改后的模板代码：

<tr *ngFor="let accountSetup of accountSetups; let i = index; trackBy: trackByAccountId">
  <td>
    <input 
      type="checkbox" 
      [(ngModel)]="accountSetup.isAvailable" 
      name="accountSetup-{{accountSetup.id || i}}">
    {{accountSetup.name}}
  </td>
</tr>

组件里添加trackBy方法（如果你的AccountSetup有唯一id的话）：

trackByAccountId(index: number, item: AccountSetup): number {
  return item.id; // 用你的AccountSetup模型里的唯一字段，没有的话返回index也可以
}

为什么之前的[checked]能正常显示？ #

因为[checked]只是单向绑定视图，它不会关联表单控件的name分组，所以每个复选框都是独立的，但缺点就是没法双向同步数据到组件。而ngModel是双向绑定，同时会和表单系统关联，相同name就会导致同步状态的问题。

这样修改后，每个复选框都会独立绑定对应的accountSetup.isAvailable，既能正确显示初始状态，又能和组件双向同步数据啦！

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