Загрузить выбор материала с несколькими опциями с некоторыми опциями отмечены?

Question

Я пытаюсь реализовать выбор материала с несколькими вариантами (например, this ).Но я хочу установить определенные флажки при загрузке страницы на основе данных, возвращаемых из API.Как бы я это сделал?Я не могу найти checked или selected свойства в любом месте.

Answer 1

Ну, у вас есть две возможности:

В вашем примере вы используете Реактивная форма , поэтому в перехватчике событий ngOnInit вы можете установить значение вашего formControl, что-то вроде этого:

ngOnInit() {
    this.toppings.setValue(['Onion', 'Mushroom'])
  }

Если вы предпочитаете на основе шаблона , вместо [(value)] попробуйте [(ngModel)], что-то вроде этого:

// some html template
<mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select [(ngModel)]="selected" multiple>
    <mat-option  *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

В компоненте:

selected = ['Onion', 'Mushroom']

Вот демоверсия с двумя возможностями , выберите то, что приготовите пиццу:)