如何实现值匹配时勾选Angular Material复选框及对象数组对比

针对你的两个问题，我来一步步帮你实现需求——当arr1中的对象id和arr2中的匹配时，自动勾选对应的Angular Material复选框。

第一步：优化数据处理（提升性能） #

首先，我们可以把arr2中的id提取到一个Set中，这样后续判断是否匹配时的效率会更高（尤其是数组元素较多时）。修改你的app.ts代码：

// 组件类中定义属性
arr1 = [
 { "id":"1", "name":"operator" },
 { "id":"2", "name":"admins" },
 { "id":"3", "name":"client" },
 { "id":"4", "name":"developer" }
];

arr2 = [
 { "id":"1", "name":"operator" },
 { "id":"3", "name":"client" }
];

// 提取arr2的id到Set，用于快速查找
matchedIds = new Set(this.arr2.map(item => item.id));

// 如果你需要保留原来的遍历逻辑做其他操作，也可以保留，但判断勾选不需要依赖它
// this.arr1.forEach(a1Obj => {
//   this.arr2.some(a2Obj => {
//     if (a2Obj.id === a1Obj.id) {
//       console.log(a1Obj);
//     }
//   })
// });

第二步：动态绑定复选框的checked属性 #

接下来修改你的app.html模板，把固定的[checked]="true"改成动态判断当前项的id是否在matchedIds集合中：

<div class="col" *ngFor="let group of arr1; let i = index">
  <mat-checkbox 
    [value]="group.id" 
    labelPosition="after" 
    [checked]="matchedIds.has(group.id)"
    (change)="assignGroups($event, group.id)"
  >
    {{ group.name }}
  </mat-checkbox>
</div>

关键说明： #

• 这里我把*ngFor的遍历对象改成了arr1（因为你的需求是基于arr1渲染所有选项），如果你的groups是arr1的别名，那保持groups也完全没问题。
• [checked]="matchedIds.has(group.id)"是核心逻辑：每次渲染复选框时，判断当前group的id是否存在于我们提前准备好的matchedIds集合中，存在则自动勾选，否则不勾选。
• 使用Set而不是每次调用arr2.some(...)的原因是，Set.has()的时间复杂度是O(1)，而some()是O(n)，当数组元素多的时候，前者性能会好很多。

针对第一个问题的单独回答： #

如果只是单纯的“值匹配时勾选”，核心逻辑也是一样的——给[checked]绑定一个返回布尔值的表达式，比如判断某个变量是否等于目标值：

<mat-checkbox [checked]="currentValue === targetValue">示例选项</mat-checkbox>

这样就能实现当值匹配时自动勾选复选框啦。

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