如何在Angular Material中实现选中子复选框后自动选中父复选框？

核心问题 #

你的代码存在两个关键问题：

• 子复选框的change事件传参错误（传入未定义的filter），导致无法正确更新子项选中状态
• onChangechild方法未正确同步父复选框的选中状态

修正后的代码 #

HTML - 子复选框

<div>
  <mat-checkbox 
    *ngFor="let subitem of subitems" 
    [value]="subitem" 
    [checked]="subitem.selected"
    (change)="onChangechild(subitem, $event)"
  >
    {{ subitem.value }}
  </mat-checkbox>
</div>

HTML - 父复选框（无需修改）

<div>
  <mat-checkbox  
    [value]="stage1" 
    [checked]="stage1.selected" 
    (change)="onChange($event)"
  >
  </mat-checkbox>
</div>

Typescript

// 子复选框变更事件
onChangechild(subitem: any, event: any) {
  // 先更新当前子项的选中状态
  subitem.selected = event.checked;
  // 只要有一个子项选中，就选中父复选框（若需求是所有子项选中才选父，把some换成every）
  this.stage1.selected = this.subitems.some(sub => sub.selected);
}

// 父复选框变更事件（无需修改）
onChange(event: any) {
  this.subitems.forEach(subitem => {
    subitem.selected = event.checked;
  });
}

补充说明 #

• 如果你的需求是所有子复选框都选中时才选中父复选框，只需把some替换成every即可：

  this.stage1.selected = this.subitems.every(sub => sub.selected);
  

• 确保stage1和subitems是组件内已正确初始化的变量，比如：

  stage1 = { selected: false };
  subitems = [
    { value: '子项1', selected: false },
    { value: '子项2', selected: false }
  ];
  

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