在ngFor循环中添加checkbox却表现如radio的问题排查求助

兄弟，我一眼就瞅出问题所在了！你的checkbox为啥像radio按钮一样只能选一个，核心原因是所有框都硬编码了checked="checked"，而且没绑定独立的状态变量，导致它们的选中状态没法各自独立维护。

问题分析 #

你当前的模板里，每个checkbox都写死了checked="checked"，页面加载时全是选中状态，但因为没有和组件里的变量绑定，当你点击其中一个时，浏览器的默认行为加上没有独立状态控制，就出现了“只能选一个”的诡异情况——虽然你给每个框加了不同的name，但没状态绑定的话，name在这里起不到啥作用。

解决方案 #

咱分三步来改，保证搞定：

1. 给每个Vas数据添加独立的选中状态
   在组件类里，拿到vasDatas之后，给每条数据加个isChecked属性，默认设为true（和你原来的默认选中对应）：

   // 比如在获取数据的方法里
   this.vasDatas.forEach(vasItem => {
     vasItem.isChecked = true;
   });
   

2. 模板里用双向绑定绑定选中状态
   把原来的checked="checked"换成[(ngModel)]="vas.isChecked"，这样每个checkbox的状态就和对应的Vas数据挂钩了，各自独立：

   <div class="vas-obs vas-selected" *ngFor="let vas of vasDatas;let i=index;"> 
     <div class="vas-obs-text checkbox-container">
       {{appProps[vas.title]}} 
       <input type="checkbox" [(ngModel)]="vas.isChecked" name="vas{{i}}"> 
       <span class="checkmark"></span> 
     </div> 
     <div class="vas-obs-value"><sup class="currency">THB</sup>{{vas.value}}</div> 
     <div class="horizantal-line-obs"></div> 
     <div class="vas-obs-text-inner">Lorem ipsum dolor sit amet,consectetur adip</div> 
   </div>
   

3. 别忘了导入FormsModule
   因为ngModel需要依赖Angular的表单模块，所以得在你的模块里导入FormsModule：

   import { FormsModule } from '@angular/forms';
   
   @NgModule({
     imports: [
       // ...其他你需要的模块
       FormsModule
     ]
   })
   export class YourComponentModule { }
   

改完之后，每个checkbox的选中状态就由自己对应的isChecked属性控制，再也不会出现只能选一个的情况啦！要是还有问题，你可以检查一下自定义的checkmark样式是不是冲突了，比如有没有错误地把所有checkbox的选中状态统一处理了。

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