如何实现全选功能？附Angular Material多选选择器示例代码

嘿，我来给你一步步搞定Angular Material多选选择器的全选功能~ 先从基础的多选结构入手，再添加全选的逻辑。

第一步：基础多选选择器实现 #

先搭好带多选功能的选择器基础结构，HTML和TS代码如下：

HTML代码 #

<mat-form-field>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

TypeScript代码 #

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

/** @title 带多选功能的选择器 */
@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
})
export class SelectMultipleExample {
  toppings = new FormControl('');
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
}

第二步：添加全选功能 #

接下来我们给选择器加上全选选项，并实现对应的逻辑：

1. 修改HTML，添加全选选项 #

在mat-select里最上方添加一个专门的全选选项，绑定点击事件和选中状态：

<mat-form-field>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <!-- 全选选项 -->
    <mat-option 
      (click)="toggleAllSelection()" 
      [selected]="isAllSelected()"
    >
      全选
    </mat-option>
    <!-- 原有选项 -->
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

2. 完善TS逻辑，实现全选/取消全选 #

在组件类里添加两个方法：一个用于切换全选状态，另一个用于判断是否所有选项都已选中，来同步全选选项的选中状态：

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

/** @title 带全选功能的多选选择器 */
@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
})
export class SelectMultipleExample {
  toppings = new FormControl('');
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

  // 切换全选/取消全选
  toggleAllSelection() {
    if (this.isAllSelected()) {
      // 如果已经全选，就清空所有选项
      this.toppings.setValue([]);
    } else {
      // 如果未全选，就选中所有选项
      this.toppings.setValue([...this.toppingList]);
    }
  }

  // 判断是否所有选项都已选中
  isAllSelected(): boolean {
    const selectedItems = this.toppings.value || [];
    return selectedItems.length === this.toppingList.length;
  }
}

这样就完成啦！点击「全选」选项可以一键选中所有配料，再次点击就能清空所有选择，而且全选选项的选中状态会自动和当前选择情况同步~

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