Angular Material下拉框：组复选框联动与展开折叠修复

1. 子项全选时自动选中组复选框 #

先确认你的数据源包含分组结构，示例结构如下：

groups = [
  {
    name: '组1',
    items: [{value: 'item1', label: '选项1'}, {value: 'item2', label: '选项2'}],
    isSelected: false
  },
  {
    name: '组2',
    items: [{value: 'item3', label: '选项3'}, {value: 'item4', label: '选项4'}],
    isSelected: false
  }
];
selectedItems: string[] = [];
selectControl = new FormControl(this.selectedItems);

在组件中监听选中值变化，同步组的选中状态：

ngOnInit() {
  this.selectControl.valueChanges.subscribe(selected => {
    this.groups.forEach(group => {
      // 校验当前组所有子项是否都在选中列表内
      const allItemsSelected = group.items.every(item => selected.includes(item.value));
      group.isSelected = allItemsSelected;
    });
  });
}

// 点击组复选框时批量切换子项选中状态
toggleGroupSelection(group: any) {
  const groupItemValues = group.items.map(item => item.value);
  if (group.isSelected) {
    // 合并选中项，去重
    this.selectedItems = [...new Set([...this.selectedItems, ...groupItemValues])];
  } else {
    // 移除当前组所有子项
    this.selectedItems = this.selectedItems.filter(item => !groupItemValues.includes(item));
  }
  this.selectControl.setValue(this.selectedItems);
}

模板中绑定组复选框状态与事件：

<mat-select [formControl]="selectControl" multiple>
  <mat-optgroup *ngFor="let group of groups" [label]="group.name">
    <mat-option>
      <mat-checkbox [(ngModel)]="group.isSelected" (change)="toggleGroupSelection(group)">
        全选 {{group.name}}
      </mat-checkbox>
    </mat-option>
    <mat-option *ngFor="let item of group.items" [value]="item.value">
      {{item.label}}
    </mat-option>
  </mat-optgroup>
</mat-select>

2. 修复展开/折叠图标显示异常 #

Angular Material 默认的mat-optgroup没有展开折叠功能，需要自定义模板实现：

先给分组添加展开状态属性：

groups = [
  {
    name: '组1',
    items: [{value: 'item1', label: '选项1'}, {value: 'item2', label: '选项2'}],
    isSelected: false,
    isExpanded: true // 控制展开折叠状态
  },
  // 其他分组结构同上
];

自定义组头模板，绑定图标切换逻辑：

<mat-select [formControl]="selectControl" multiple>
  <div *ngFor="let group of groups">
    <!-- 自定义可点击的组头 -->
    <div class="group-header" (click)="group.isExpanded = !group.isExpanded">
      <mat-icon>{{group.isExpanded ? 'expand_less' : 'expand_more'}}</mat-icon>
      <span>{{group.name}}</span>
      <mat-checkbox 
        [(ngModel)]="group.isSelected" 
        (change)="toggleGroupSelection(group)" 
        class="group-checkbox"
        (click)="$event.stopPropagation()"
      ></mat-checkbox>
    </div>
    <!-- 根据展开状态显示/隐藏子选项 -->
    <div *ngIf="group.isExpanded" class="group-items">
      <mat-option *ngFor="let item of group.items" [value]="item.value">
        {{item.label}}
      </mat-option>
    </div>
  </div>
</mat-select>

添加基础样式保证布局正常：

.group-header {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
}

.group-header mat-icon {
  margin-right: 8px;
}

.group-checkbox {
  margin-left: auto;
}

.group-items {
  padding-left: 32px;
}

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