Есть ли способ добавить опцию выбора материала в конец списка? - PullRequest
Новая
       4

Есть ли способ добавить опцию выбора материала в конец списка?

1 голос
/ 31 октября 2019

Я хочу, чтобы всякий раз, когда у меня есть, когда я выбираю опцию, добавляю ее в конец списка, вместо того, чтобы размещать ее в качестве порядка ...

Вы можете проверить блики стека материала: https://stackblitz.com/angular/jdgkdlbeldj?file=src%2Fapp%2Fselect-multiple-example.ts

Если у меня есть этот список: 

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

И я выбираю изначально Mushroom and Pepperoni -> MyList = [Mushroom, Pepperoni].

Если я добавлю новую опцию, например, лук, Я хотел бы иметь MyList как: [Mushroom, Pepperoni, Onion], но я получаю его как [Mushroom, Onion, Pepperoni].

Как я могу это сделать?

Ответы [ 2 ]

3 голосов
/ 31 октября 2019

Угловой материал выберите предоставить свойство ввода sortComparator. Он примет функцию компаратора для сортировки выбранного значения.

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>

component.ts 

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

Пример

1 голос
/ 31 октября 2019

Вместо использования привязки формы вручную проверяйте, когда сработало событие selectionChange, и затем сравнивайте новый выбор с вашим сохраненным выбором. Если новый выбранный элемент не выбран в вашем списке, вставьте его в него, когда в новом выделении отсутствует элемент, удалите его из списка. 

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