Angular 12中实现mat-select全选选项但不影响其值的方法

核心思路 #

将全选选项作为独立视觉元素，不绑定到表单控件的选项值集合中，手动控制它的选中状态样式，同时拦截其点击事件避免影响表单控件的选中值，同步处理全选/取消全选逻辑。

具体实现 #

1. 模板代码 #

<mat-select [formControl]="selectedOptions" multiple>
  <!-- 全选选项：不绑定value，单独处理点击事件 -->
  <mat-option #selectAllOption (click)="toggleSelectAll($event)">
    全选
  </mat-option>
  <!-- 普通业务选项 -->
  <mat-option *ngFor="let option of options" [value]="option.value">
    {{ option.label }}
  </mat-option>
</mat-select>

2. 组件逻辑 #

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatOption } from '@angular/material/core';

@Component({
  selector: 'app-select-all-demo',
  templateUrl: './select-all-demo.component.html'
})
export class SelectAllDemoComponent implements AfterViewInit {
  selectedOptions = new FormControl<string[]>([]);
  // 业务选项集合
  options = [
    { value: 'option1', label: '选项1' },
    { value: 'option2', label: '选项2' },
    { value: 'option3', label: '选项3' }
  ];

  @ViewChild('selectAllOption') private selectAllOption!: MatOption;

  toggleSelectAll(event: MouseEvent): void {
    // 阻止事件冒泡，避免mat-select将全选选项纳入选中值
    event.stopPropagation();

    const isAllSelected = this.selectedOptions.value.length === this.options.length;
    if (isAllSelected) {
      // 取消全选：清空表单控件值，同步取消全选选项的视觉选中
      this.selectedOptions.setValue([]);
      this.selectAllOption.deselect();
    } else {
      // 执行全选：设置所有业务选项值，同步选中全选选项
      this.selectedOptions.setValue(this.options.map(opt => opt.value));
      this.selectAllOption.select();
    }
  }

  ngAfterViewInit(): void {
    // 监听选中值变化，自动同步全选选项的视觉状态
    this.selectedOptions.valueChanges.subscribe(selectedValues => {
      const shouldSelectAll = selectedValues.length === this.options.length;
      if (shouldSelectAll && !this.selectAllOption.selected) {
        this.selectAllOption.select();
      } else if (!shouldSelectAll && this.selectAllOption.selected) {
        this.selectAllOption.deselect();
      }
    });
  }
}

3. 可选样式补充（确保选中样式一致） #

如果Angular 12中手动调用select()/deselect()后样式未生效，可添加以下CSS：

.mat-option.mat-selected {
  background-color: rgba(0, 0, 0, 0.04); /* 匹配Material默认选中背景色 */
}

关键说明 #

• 全选选项不设置[value]，且通过event.stopPropagation()阻断了mat-select的默认选中逻辑，因此它的点击不会向表单控件中添加任何值。
• 通过ViewChild获取全选选项实例，调用select()/deselect()仅控制视觉选中状态，不会触发表单控件的value变更。
• 监听表单控件的value变化，实现全选选项与普通选项的状态同步（比如用户手动取消某个选项时，全选自动取消选中）。

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