Angular中如何根据数据库数组匹配设置mat-checkbox选中状态

错误原因 #

你遇到的报错来自两个问题：

1. fachBetreuerType 是接口返回的数组类型，你直接调用 fachBetreuerType.fachbetreuung 是错误的，数组本身没有 fachbetreuung 属性，需要先访问数组元素才能拿到内部字段
2. 接口请求是异步逻辑，模板首次渲染时接口还没有返回结果，fachBetreuerType 处于未赋值的 undefined 状态，读取属性自然会报错

解决方案 #

推荐你提前对返回数据做预处理，避免在模板里做复杂逻辑判断，性能和可维护性更好：

1. 首先在组件中新增一个存储选中值的Set变量，同时初始化接口返回的数组为空，避免初始状态报错

// 组件顶部声明变量
fachBetreuerType: FachbetreuungZuordnungSharing[] = [];
selectedBezeichnungen: Set<string> = new Set();

2. 在接口请求的回调中对选中值做预处理，把所有需要勾选的bezeichnung存入Set

this.route.params.subscribe(params => {
  const id = params['id'];
  this.fService
  .getFachInfos(id)
  .subscribe(data => { 
    this.fachBetreuerType = data;
    // 提取所有需要勾选的bezeichnung存入Set
    this.selectedBezeichnungen = new Set(
      data.map(item => item.fachbetreuung?.bezeichnung).filter(Boolean)
    );
  })
})

3. 模板里直接判断当前遍历的项是否在选中Set中即可，兜底返回false避免异常

<mat-checkbox *ngFor="let bezeichnung of betreuerOverview" 
              [checked]="selectedBezeichnungen.has(bezeichnung.bezeichnung)">
  {{bezeichnung.bezeichnung}}
</mat-checkbox>

如果你的数据量很小，不想额外声明Set变量，也可以直接在模板中用数组方法判断，写法如下：

<mat-checkbox *ngFor="let bezeichnung of betreuerOverview" 
              [checked]="fachBetreuerType?.some(item => item.fachbetreuung?.bezeichnung === bezeichnung.bezeichnung) ?? false">
  {{bezeichnung.bezeichnung}}
</mat-checkbox>

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