Angular 12中如何通过选择‘All’选项实现全选/取消全选？

核心思路 #

通过监听多选框的选择变化事件，判断是否选中"All"选项，执行对应的全选或全取消逻辑，同时修正原代码中的变量名和选项值缺失问题。

修改后的组件代码 #

component.ts #

selectedCities: any[] = [];

allCities = [
  { value: 'all', label: 'All' },
  { value: 'Mumbai-1', label: 'Mumbai' },
  { value: 'Delhi-2', label: 'Delhi' },
  { value: 'Chennai-2', label: 'Chennai' },
  { value: 'Kolkatta-3', label: 'Kolkatta' },
];

onCitySelectionChange(selectedValues: any[]) {
  const hasAll = selectedValues.includes('all');
  
  if (hasAll) {
    // 选中All时，自动选中所有城市
    const cityValues = this.allCities.filter(city => city.value !== 'all').map(city => city.value);
    this.selectedCities = ['all', ...cityValues];
  } else {
    // 取消All时，如果之前是全选状态，清空所有选中项
    const cityValues = this.allCities.filter(city => city.value !== 'all').map(city => city.value);
    const wasFullySelected = cityValues.every(city => this.selectedCities.includes(city));
    if (wasFullySelected) {
      this.selectedCities = [];
    }
  }
}

component.html #

<mat-form-field>
  <mat-select 
    [(ngModel)]="selectedCities" 
    placeholder="Favorite City" 
    multiple
    (selectionChange)="onCitySelectionChange($event.value)">
    <mat-option *ngFor="let city of allCities" [value]="city.value">
      {{city.label}}
    </mat-option>
  </mat-select>
</mat-form-field>

逻辑说明 #

1. 给"All"选项补充value: 'all'，用于识别选中状态
2. 监听selectionChange事件，获取当前选中的所有值
3. 选中"All"时，将所有城市的value与"all"一起加入选中数组，实现全选
4. 取消"All"时，先判断之前是否处于全选状态，若是则清空所有选中项；若已手动取消部分城市，则保持当前选中状态

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