如何获取Angular Select组件中选项的选中顺序？

Angular Material的多选Select组件默认用Set存储选中值，不会保留用户选中的顺序。要获取选中顺序，你需要手动维护一个数组来记录每次选中/取消选中的操作。

实现步骤 #

1. 在组件中定义一个数组，用于保存选中项的顺序：

selectedOptionsOrder: any[] = [];

2. 监听Select的selectionChange事件，在事件处理函数中更新顺序数组：
   模板代码：

<mat-select [formControl]="multiSelectControl" multiple (selectionChange)="handleSelectionChange($event)">
  <mat-option *ngFor="let item of options" [value]="item">
    {{ item.label }}
  </mat-option>
</mat-select>

组件逻辑：

import { FormControl } from '@angular/forms';
import { MatSelectChange } from '@angular/material/select';

// ...

multiSelectControl = new FormControl([]);
options = [
  { value: 'a', label: '选项A' },
  { value: 'b', label: '选项B' },
  { value: 'c', label: '选项C' }
];

handleSelectionChange(event: MatSelectChange): void {
  const currentValue = event.source.value;
  const isSelected = this.multiSelectControl.value.includes(currentValue);

  if (isSelected) {
    // 选项被选中，添加到顺序数组末尾
    if (!this.selectedOptionsOrder.includes(currentValue)) {
      this.selectedOptionsOrder.push(currentValue);
    }
  } else {
    // 选项被取消选中，从顺序数组中移除对应项
    const index = this.selectedOptionsOrder.indexOf(currentValue);
    if (index !== -1) {
      this.selectedOptionsOrder.splice(index, 1);
    }
  }

  // 此时selectedOptionsOrder就是按选中顺序排列的数组
  console.log('选中顺序:', this.selectedOptionsOrder);
}

说明 #

• 每次用户点击选项切换选中状态时，selectionChange事件都会触发，通过判断当前选项是否在表单控件的选中值中，来决定是添加还是移除顺序数组中的项。
• 这个方法同时支持鼠标点击和键盘操作（如空格选中）触发的状态变化。
• 如果需要基于选中顺序做展示或业务逻辑，直接使用selectedOptionsOrder数组即可。

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