如何获取Angular Material MatSelect多选组件的当前选项状态（选中/未选中）

哈哈，这个需求我之前也碰到过！在Angular的多选MatSelect场景下，要精准获取当前点击选项的选中/未选中状态，再触发对应的对话框，其实可以通过结合MatOption的点击事件和MatSelect的选中集合来实现，下面是具体的实现方案：

1. 模板层配置 #

首先在你的模板里，给mat-select开启多选模式（加上multiple属性），然后给每个mat-option绑定点击事件，把当前选项对象传进去：

<mat-select multiple [(value)]="selectedOptions">
  <mat-option 
    *ngFor="let option of options" 
    [value]="option" 
    (click)="onOptionClicked(option)"
  >
    {{ option.label }}
  </mat-option>
</mat-select>

2. 组件逻辑处理 #

在组件类里，先定义好选项列表和选中集合，然后实现点击事件的处理方法。核心思路是：判断当前点击的选项是否已经在选中集合里——如果存在，说明这次点击是取消选中；如果不存在，就是选中操作，再根据这个状态打开对应的对话框。

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
// 导入你的自定义对话框组件
import { CustomDialogComponent } from './custom-dialog.component';

// 定义选项的类型
interface SelectOption {
  value: string;
  label: string;
}

@Component({
  selector: 'app-multi-select-example',
  templateUrl: './multi-select-example.component.html',
})
export class MultiSelectExampleComponent {
  // 模拟的选项列表
  options: SelectOption[] = [
    { value: 'opt1', label: '选项一' },
    { value: 'opt2', label: '选项二' },
    { value: 'opt3', label: '选项三' },
  ];
  // 存储选中的选项
  selectedOptions: SelectOption[] = [];

  constructor(private dialog: MatDialog) {}

  onOptionClicked(option: SelectOption) {
    // 判断当前选项的选中状态
    const isCurrentlySelected = this.selectedOptions.includes(option);

    // 根据状态打开对应的对话框
    if (isCurrentlySelected) {
      // 取消选中时的对话框
      const dialogRef = this.dialog.open(CustomDialogComponent, {
        data: { content: `你刚刚取消选中了「${option.label}」` }
      });
    } else {
      // 选中时的对话框
      const dialogRef = this.dialog.open(CustomDialogComponent, {
        data: { content: `你刚刚选中了「${option.label}」` }
      });
    }
  }
}

3. 进阶：对话框确认后再切换选中状态 #

如果你的需求是先弹出对话框确认，用户同意后再切换选项的选中状态（而不是点击就自动切换），那需要阻止MatOption的默认行为，然后手动更新选中集合：

模板调整 #

给点击事件加上$event参数，用来阻止默认行为：

<mat-option 
  *ngFor="let option of options" 
  [value]="option" 
  (click)="onOptionClicked(option, $event)"
>
  {{ option.label }}
</mat-option>

组件逻辑更新 #

onOptionClicked(option: SelectOption, event: MouseEvent) {
  // 阻止MatOption的默认选中/取消行为
  event.preventDefault();
  
  const isCurrentlySelected = this.selectedOptions.includes(option);
  const dialogMessage = isCurrentlySelected 
    ? `确认要取消选中「${option.label}」吗？` 
    : `确认要选中「${option.label}」吗？`;

  // 打开确认对话框
  const dialogRef = this.dialog.open(CustomDialogComponent, {
    data: { content: dialogMessage }
  });

  // 监听对话框关闭后的结果
  dialogRef.afterClosed().subscribe(isConfirmed => {
    if (isConfirmed) { // 假设对话框返回true表示用户确认操作
      if (isCurrentlySelected) {
        // 移除选项
        this.selectedOptions = this.selectedOptions.filter(opt => opt !== option);
      } else {
        // 添加选项
        this.selectedOptions = [...this.selectedOptions, option];
      }
    }
  });
}

最后要注意的点 #

• 确保你已经在Angular模块中导入了MatSelectModule、MatOptionModule和MatDialogModule，否则组件会报错。
• 如果你的选项是复杂对象，判断includes可能不准确（因为引用类型比较的是地址），这时候可以改成通过唯一标识（比如option.value）来判断是否在选中集合里。

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