有没有办法在列表末尾添加材料选择选项？

Question

我想每当我有一个 ，当我选择一个选项时，将其添加到列表的末尾，而不是将其按顺序放置......

您可以检查材料的stackblitz： https://stackblitz.com/angular/jdgkdlbeldj ?file=src%2Fapp%2Fselect-multiple-example.ts

如果我有这个清单：

toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

我最初选择蘑菇和意大利辣香肠 ->MyList = [Mushroom, Pepperoni].

如果我添加一个新选项，例如 Onion，我希望将 MyList 设置为： [Mushroom, Pepperoni, Onion]，但我将其设置为[Mushroom, Onion, Pepperoni]。

我该怎么做？

Answer 1

Angular 材质选择提供 sortComparator 输入属性。它将接受比较器功能来对所选值进行排序。

组件.html

<mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select [sortComparator]="sortComparator" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

组件.ts

sortComparator(a:any, b:any){
    return 1;
  }

例子