如何在Angular 4/5中获取多个复选框的选中值

我明白你的问题啦——现在你绑定[(ngModel)]到cat.id，导致原本的分类ID被覆盖成了true/false的选中状态，既丢了原数据，又没法拿到真正需要的选中项值。咱们来调整一下代码，轻松搞定这个问题：

第一步：给分类对象添加选中状态属性 #

首先，你需要在获取到分类数据后，给每个分类对象新增一个selected字段，用来单独存储复选框的选中状态，这样就不会破坏原有的id和name了。修改组件里的代码：

this.categories$ = this.storeService.getAllCategories().pipe(
  map(categories => {
    // 给每个分类添加selected属性，默认未选中
    return categories.map(cat => ({ ...cat, selected: false }));
  })
);

第二步：修改模板绑定逻辑 #

把ngModel绑定到新增的selected属性，而不是cat.id，这样就能保留原ID，同时正确记录选中状态：

<h4>Categories</h4>
<div class="form-check" *ngFor="let cat of categories$|async">
  <input 
    class="form-check-input" 
    [(ngModel)]="cat.selected" 
    name="categories"  <!-- 这里建议统一命名，避免每个复选框name不同导致的表单问题 -->
    type="checkbox" 
    id="{{cat.name}}"
    value="{{cat.id}}"  <!-- 可选：设置value属性，方便原生表单获取，但用ngModel的话主要靠selected判断 -->
  >
  <label class="form-check-label" for="{{cat.name}}">
    {{cat.name}}
  </label>
</div>

第三步：获取选中的分类值 #

当你需要获取用户选中的分类时，只需要过滤categories$中的数据，拿到selected为true的项，提取对应的id或name即可：

// 比如在提交表单时调用
getSelectedCategories() {
  this.categories$.subscribe(categories => {
    const selectedIds = categories.filter(cat => cat.selected).map(cat => cat.id);
    const selectedNames = categories.filter(cat => cat.selected).map(cat => cat.name);
    console.log('选中的分类ID：', selectedIds);
    console.log('选中的分类名称：', selectedNames);
    // 这里可以把选中的ID/名称传给后端或者做其他处理
  });
}

为什么原来的写法有问题？ #

你之前把[(ngModel)]绑定到cat.id，Angular会把复选框的选中状态（true/false）直接赋值给cat.id，这就覆盖了原本的分类ID数值，导致你既拿不到正确的ID，也没法通过ID判断选中状态，所以一定要用单独的属性来存储选中状态哦～

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