Angular 15.1.0中复选框批量勾选/取消异常问题求助

问题根源 #

你的复选框出现同步勾选/取消的核心原因是所有复选框的name属性完全相同（都是"name"）。在Angular的表单机制中，相同name的表单控件会被识别为同一个表单元素，导致[(ngModel)]的双向绑定出现混乱，操作任意一个复选框都会触发所有同name控件的状态同步。

修复方案 #

1. 为每个复选框设置唯一的name属性 #

修改HTML中复选框的name属性，使用用户的唯一标识（比如no_nomina）生成唯一名称：

<input class="form-check-input" type="checkbox" 
       [name]="'user-checkbox-' + user.no_nomina" 
       [attr.id]="user.no_nomina + 'Checkbox'" 
       [(ngModel)]="user.check">

2. 可选：为*ngFor添加trackBy优化变更检测 #

为避免Angular在数据更新时重复渲染所有复选框，可添加trackBy函数提升性能：

• 在组件类中添加trackBy方法：

trackByNomina(index: number, user: any): string {
  return user.no_nomina;
}

• 修改HTML中的*ngFor指令：

<div class="form-check" *ngFor="let user of users; trackBy: trackByNomina">

额外检查点 #

• 确认users数组中的每个user对象都是独立引用（你的初始化逻辑是逐个push新对象，这部分没问题）
• 确保ngOnChanges中的异步请求返回后，正确更新每个user.check的状态（数据显示正常已验证这部分逻辑正确）

验证修改 #

完成上述修改后，点击不同日期弹出模态框，复选框将独立响应勾选操作，不会再出现同步变更的问题。

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