Angular中ngFor循环内复选框点击仅首个状态变更问题

这个问题我之前也碰到过，核心根源就是所有复选框的id属性完全重复，再加上<label>的for属性都绑定到同一个id上，才导致了点击异常。HTML规范要求页面内的id必须唯一，浏览器查找id匹配元素时只会返回第一个结果，所以不管点哪个复选框的标签，都会触发第一个id="check"的元素，自然只有它的状态会更新。

修改后的完整HTML模板 #

<div *ngFor="let num of count; let i = index" class="m-b-20">
  <div class="checkbox">
    <input 
      type="checkbox" 
      id="check-{{i}}" 
      name="num-{{i}}" 
      [(ngModel)]="num.checked" 
      (click)="clicked(num)" 
      ngDefaultControl
    />
    <label for="check-{{i}}"></label>
  </div>
  {{num.checked}}
</div>

关键修改点说明 #

• 在*ngFor指令里追加let i = index，用循环索引生成唯一标识（索引在每个循环项里都是独一无二的）。
• 把input的id改成check-{{i}}，让每个复选框拥有专属的id（比如check-0、check-1这类格式）。
• 同步更新<label>的for属性为check-{{i}}，确保每个标签精准绑定到对应的复选框上。
• 同时将name属性改为num-{{i}}，避免表单中出现重复的name值，这也是表单元素的最佳实践。

修改完成后，你点击任意复选框或它的标签，都会正确触发对应元素的状态切换，[(ngModel)]也会同步更新当前循环项的num.checked值，页面上显示的{{num.checked}}也会跟着变化啦。

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