如何实现mat-select全选联动与选中文本自动切换功能

针对需求中的两个核心联动逻辑，我们可以通过监听表单控件值变化、自定义下拉框显示文本的方式实现，以下是完整修改代码：

修改后的模板文件（select-overview-example.html） #

<mat-form-field appearance="fill">
  <mat-label>Select an option</mat-label>
  <mat-select [formControl]="selectedOptions" multiple [compareWith]="compareFn">
    <!-- 自定义下拉框触发区显示文本 -->
    <mat-select-trigger>
      {{ selectedOptions.value.includes('all') ? 'all' : selectedOptions.value.join(', ') }}
    </mat-select-trigger>
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>
</mat-form-field>

修改后的组件文件（select-overview-example.ts） #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
})
export class SelectOverviewExample implements OnInit, OnDestroy {
  selectedOptions = new FormControl<string[]>([]);
  options = ['all', 'Option 1', 'Option 2', 'Option 3', 'Option 4'];
  private destroy$ = new Subject<void>();
  private isUpdating = false; // 防止值变化循环触发

  ngOnInit(): void {
    this.selectedOptions.valueChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe(selectedValues => {
        if (this.isUpdating) return;
        this.isUpdating = true;

        const nonAllOptions = this.options.filter(opt => opt !== 'all');
        const selectedNonAll = selectedValues?.filter(val => val !== 'all') || [];

        // 场景1：选中"all"时，自动勾选所有选项
        if (selectedValues?.includes('all')) {
          this.selectedOptions.setValue([...this.options]);
        }
        // 场景2：选中所有非"all"选项时，自动勾选"all"
        else if (selectedNonAll.length === nonAllOptions.length) {
          this.selectedOptions.setValue([...this.options]);
        }
        // 场景3：取消部分非"all"选项时，同步取消"all"
        else if (selectedValues?.includes('all')) {
          this.selectedOptions.setValue(selectedNonAll);
        }

        this.isUpdating = false;
      });
  }

  // 自定义选项匹配逻辑，确保选中状态正确
  compareFn(opt1: string, opt2: string): boolean {
    return opt1 === opt2;
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

关键逻辑说明 #

• 自定义显示文本：通过mat-select-trigger控制下拉框触发区的显示内容，当选中值包含"all"时直接显示"all"，否则拼接选中的选项文本。
• 值变化监听：订阅FormControl的valueChanges事件，处理三种核心场景：
  • 选中"all"时，将所有选项设为选中状态
  • 选中全部非"all"选项时，自动加入"all"选项
  • 取消部分非"all"选项时，同步移除"all"选项
• 防止循环触发：使用isUpdating标志位避免因设置值再次触发valueChanges订阅，导致无限循环。
• 内存泄漏防护：使用takeUntil操作符在组件销毁时取消订阅，避免内存泄漏。

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