使用 Angular 材质的 Mat-Select Multiple - 有没有办法在用户选择后将所选选项移动到数组中列表的顶部？

Question

有没有一种方法可以对数组中的项目进行排序(移动(，使所选选项位于选择菜单的顶部，然后按字母顺序对菜单的其余部分进行排序。当用户取消选择选项时，它能按字母顺序返回到正确的位置吗？

<form [formGroup]="formGroup" (ngSubmit)="onSubmit(formGroup.value)" class="form">
<div>
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select formControlName="toppings" multiple (selectionChange)="change($event)">
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<button style="margin: 0 1rem 0 0;" (click)="clear($event)" mat-raised-button color="primary">Reset</button>
<button mat-raised-button color="primary" type="submit" class="button" [disabled]="!formGroup.valid">Submit Form</button>
</form>

import { Component, OnInit } from '@angular/core';
import {
FormBuilder,
FormControl,
FormGroup,
Validators
} from '@angular/forms';
@Component({
selector: 'app-select-list',
templateUrl: './select-list.component.html',
styleUrls: ['./select-list.component.scss']
})
export class SelectListComponent implements OnInit {
formGroup: FormGroup;
toppingList: string[] = [
'Extra cheese',
'Mushroom',
'Onion',
'Pepperoni',
'Sausage',
'Tomato'
];
selectedToppingList = ['Extra cheese', 'Tomato', 'Onion'];
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.formGroup = this.fb.group({
toppings: new FormControl(this.selectedToppingList, Validators.required)
});
}
change(e) {
console.log(e.value);
// sort toppingList array here with sort() function
}
clear(e) {
console.log(e);
this.formGroup.reset();
}
onSubmit(post) {
if (this.formGroup.valid) {
console.log(post);
}
}
}

我已经很好地掌握了如何在JS中使用sort((函数，但将项目添加到列表的顶部，然后对剩余的项目进行排序是我感到困惑的地方。此外，当用户取消选择时，我也会有点挂断电话。任何帮助都会很棒！非常感谢。

这是我正在合作的StackBlitzhttps://stackblitz.com/edit/angular-ivy-sort?file=src%2Fapp%2Fselect-列出%2选择列表组件.ts

Answer 1

开始：https://stackblitz.com/edit/angular-ivy-sort-xreuvi?file=src/app/select-列出/选择列表组件.ts

在constructor:中

selectedToppingList = ['Extra cheese', 'Tomato', 'Onion'];
toppingListMaster = [ ...this.toppingList ];

在ngOnSubmit:中

this.change({value: this.selectedToppingList})

您的change()功能

change(e:any) {
console.log(e.value);
let sel = [], unsel = []
this.toppingList.forEach(item=> {
if (e.value.indexOf(item) !== -1) sel.push(item);
else unsel.push(item)
})
this.toppingList = [ ...sel, ...unsel ];
// sort toppingList array here with sort() function
}

以及重置

clear(e) {
console.log(e);
this.formGroup.reset();
this.toppingList = this.toppingListMaster
}