Angular中跟踪multiple mat-select选中选项顺序的实现方案问询

要实现按用户点击顺序跟踪mat-select多选的选中项，核心思路是手动维护一个记录选中顺序的数组，完全控制选中/取消操作对数组的修改，而非依赖mat-select默认按选项原始顺序排列的value数组。

实现步骤 #

1. 模板改造
   放弃双向绑定[(value)]，改为单向绑定[value]到自定义数组；给每个mat-option绑定点击事件，传递当前选项值。

   <mat-select multiple [value]="selectedOrder">
     <mat-option 
       *ngFor="let topping of toppings" 
       [value]="topping" 
       (click)="toggleSelection(topping)"
     >
       {{ topping }}
     </mat-option>
   </mat-select>
   

2. 组件逻辑实现
   维护selectedOrder数组作为选中顺序的唯一数据源，在点击事件中处理选中/取消逻辑：

   • 若选项已在数组中，移除它（用户取消选中）
   • 若选项不在数组中，添加到数组末尾（用户新选中）

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-topping-select',
     templateUrl: './topping-select.component.html',
   })
   export class ToppingSelectComponent {
     // 可选选项列表
     toppings: string[] = ['Onion', 'Mushroom', 'Pepperoni', 'Extra cheese'];
     // 记录选中顺序的数组
     selectedOrder: string[] = [];
   
     toggleSelection(topping: string): void {
       const index = this.selectedOrder.indexOf(topping);
       if (index > -1) {
         // 取消选中：移除对应项
         this.selectedOrder.splice(index, 1);
       } else {
         // 选中：添加到数组末尾
         this.selectedOrder.push(topping);
       }
   
       // 直接使用selectedOrder即可获取按点击顺序排列的结果
       console.log('当前选中顺序:', this.selectedOrder);
     }
   }
   

补充说明 #

• 该方案同时支持鼠标点击和键盘操作（空格/回车选中），mat-option的点击事件会在键盘操作时自动触发。
• selectedOrder完全由用户操作顺序决定，完全匹配需求场景：
  • 依次选中Onion→Mushroom→Pepperoni，得到['Onion', 'Mushroom', 'Pepperoni']
  • 取消Mushroom后选中Extra cheese，得到['Onion', 'Pepperoni', 'Extra cheese']

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