Angular mat-checkbox ngModel值异常 如何获取选中值用于用户列表过滤

问题原因 #

• 所有mat-checkbox绑定了同一个resultModel.char变量，双向绑定默认只会存储布尔值表示当前复选框是否选中，无法获取对应选项的具体值
• 直接绑定resultModel.char.bezeichnung报错是因为初始化时resultModel.char为undefined，无法读取下属属性

解决方案（多选场景，复选框默认对应多选逻辑） #

1. 定义选中值存储变量 #

TS中新增数组存储所有选中的选项：

// 可将any替换为你的char数据实际类型
selectedChars: any[] = [];

2. 修改模板绑定逻辑 #

替换原有复选框绑定逻辑，手动控制选中状态、传递选中项：

<ng-container *ngFor="let char of allChars">
  <mat-checkbox 
    [checked]="selectedChars.includes(char)" 
    (change)="onCharCheckChange(char, $event.checked)"
    name="allgemeinesMerkmal"
  >
    {{char.bezeichnung}}
  </mat-checkbox>
</ng-container>

3. 新增选中状态变更处理方法 #

TS中添加方法同步更新选中数组：

onCharCheckChange(char: any, isChecked: boolean) {
  if (isChecked) {
    this.selectedChars.push(char);
  } else {
    // 用唯一ID匹配删除，避免引用类型匹配出错
    const index = this.selectedChars.findIndex(item => item.allgemeinesMerkmalId === char.allgemeinesMerkmalId);
    if (index > -1) {
      this.selectedChars.splice(index, 1);
    }
  }
  // 触发过滤逻辑
  this.FilterChanged();
}

4. 调整过滤逻辑适配多选 #

修改原有过滤器，匹配所有选中值：

map(p => {
  // 无选中项时返回全部数据
  if (!this.selectedChars.length) return p;
  // 提取所有选中项的标识并转小写
  const selectedBezeichnungen = this.selectedChars.map(item => item.bezeichnung.toLowerCase());
  return p.filter((i: any) => {
    const itemBezeichnungen = this.getAllgemeineMerkmaleBezeichnung(i.allgemeinesMerkmal)?.map(str => str.toLowerCase()) || [];
    // 当前项只要有一个标识命中选中列表就保留
    return itemBezeichnungen.some(bezeichnung => selectedBezeichnungen.includes(bezeichnung));
  })
})

补充（单选场景） #

如果你的业务是单选逻辑，建议直接使用mat-radio-group组件更符合交互规范，绑定逻辑会更简单，不需要手动维护选中数组。

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