mat-select: программный предварительный выбор элементов

Question

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

StackBlitz

В моем примере я хочу отобразить список выбираемых цветов сНесколько цветов предварительно выбраны.Сначала я создаю mat-select и его содержимое (mat-options), перебирая массив строк в файле TS моего диалога:

<mat-select placeholder="Colors" formControlName="selectedColors" multiple>
   <mat-option *ngFor="let color of allColors" value="{{color}}">{{color}}</mat-option>
</mat-select>

Это работает просто отлично.В файле TS моего диалогового окна объявлены следующие массивы:

this.allColors =  ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
this.defaultSelections = ['red', 'green', 'blue'];

Обратите внимание на 2-й массив "defaultSelections": я хочу, чтобы эти элементы были предварительно выбраны при отображении диалогового окна.Я не могу найти / выяснить, как это сделать.

Заранее спасибо за помощь!

Answer 1

Поскольку вы используете ReactiveForms, вы можете использовать свойство значения по умолчанию для FormControl, чтобы установить начальные значения mat-select.

this.defaultSelections = ['red', 'green', 'blue'];

this.form = this.formBuilder.group({
  selectedColors: [this.defaultSelections]
});

Работающий пример .