Angular 中 mat-select 组件多选按选择顺序排序

我们在用 AngularJS 开发前端时，经常会用到 mat-select 组件实现下拉选择多选。该组件选中值默认按列表顺序排序，如果想按用户的点击选择的顺序进行排序应该如何实现呢？实现方式很多种，我们直接使用组件自带的属性 sortComparator 进行自定义排序：

HTML

<mat-select placeholder="请选择" [(ngModel)]="selectedList" multiple [sortComparator]="noCompareFunction">
  <mat-option *ngFor="let item of list" [value]="item.id">{{item.name}}</mat-option>
</mat-select>

TS

noCompareFunction() {
  return 0 // 负数：按用户选择顺序倒序排序，先选择排后面，后选择排前面；非负数：按用户选择顺序排序，先选择排前面，后选择排后面
}

版权属于：瞭月

本文链接：https://www.lervor.com/archives/278/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。