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

Question

每当我有一个时，当我选择一个选项时，我都想把它添加到列表的末尾，而不是按顺序排列。。。

您可以检查材料的堆叠量：https://stackblitz.com/angular/jdgkdlbeldj?file=src%2Fapp%2Fselect-多个样本.ts

如果我有这个列表：

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

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

如果我添加一个新选项，如洋葱，我希望MyList为：[Mushroom, Pepperoni, Onion]，但我得到它作为[Mushroom, Onion, Pepperoni]。

我该怎么做？

Answer 1

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

component.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;
}

示例

Answer 2

请改用表单绑定手动检查何时触发selectionChange事件，然后将新选择与保存的选择进行比较。当您的列表中没有选择新的选定元素时，当您的新选择中缺少一个项目时，将其推入其中，将其从列表中删除。

<mat-form-field>
<mat-select (selectionChange)="changeMySelection($event)" [value]="myList">
// your options ....
</mat-select>
</mat-form-field>