Angular中mat-select多选下拉如何添加全选/取消全选复选框

1. 修改HTML模板 #

在现有<mat-select>组件内部添加下拉面板头部区域，插入全选和清空操作按钮：

<mat-form-field appearance="outline" class="col-100">
  <mat-label>{{labels.criteria.name}}</mat-label>
  <mat-select formControlName="criteria" multiple  [(ngModel)]="selected">
    <!-- 新增头部操作区 -->
    <mat-select-header class="px-2 py-2 d-flex justify-content-end gap-2">
      <button mat-stroked-button size="small" (click)="selectAll()">全选</button>
      <button mat-stroked-button size="small" (click)="clearSelection()">清空</button>
    </mat-select-header>
    <!-- 原有选项逻辑保持不变 -->
    <mat-option *ngFor="let criterion of options.criteria" 
      [value]="criterion.value">
      {{criterion.text}}
    </mat-option>
  </mat-select>
</mat-form-field>

你可以根据需求调整头部按钮的样式，上述示例用的是bootstrap通用布局类，无依赖可自行替换自定义样式。

2. 修改TS业务代码 #

在现有TS文件中新增全选、清空的处理方法：

selected = [];
constructor(
  private service: InterviewService, 
  @Inject(MAT_DIALOG_DATA) public data: Interview
) {}
ngOnInit() {
  this.selected = this.data.criteria.map(criterion => {
    return criterion.id;
  });
}

// 新增：全选所有选项
selectAll(): void {
  // 提取所有选项的value值赋值给选中数组
  this.selected = this.options.criteria.map(item => item.value);
  // 同步更新响应式表单控件值，避免表单数据不一致
  this.formGroup.get('criteria')?.setValue(this.selected);
}

// 新增：清空所有选中项
clearSelection(): void {
  this.selected = [];
  this.formGroup.get('criteria')?.setValue([]);
}

onSubmit(): void {
  const data = this.formGroup.value;
  data.criteria = data.criteria.map((item: number) => {
    return { id: item };
  });
}

注意事项 #

• 如果你的options.criteria中存储选项ID的字段不是value，调整selectAll方法中提取的字段即可
• 原有提交逻辑不需要修改，选中值会自动同步到表单中

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