Как установить параметр true / false с помощью mat-select (multiselect) Angular Material

Question

Я использовал множественный выбор из Angular Material.

<mat-form-field>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

Я хочу поставить некоторые опции на true или false, как я хочу, и я не знаю как.

до после

Answer 1

Поскольку ответ будет поступать от API, вы получите ответ асинхронно.

В этом случае вы можете вызвать метод setValue для вашего экземпляра FormControl или FormGroup вЧтобы установить значения по умолчанию.

Примерно так:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { DataService } from './data.service';

@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
  styleUrls: ['select-multiple-example.css'],
})
export class SelectMultipleExample {
  toppingList: string[] = [
    'Extra cheese',
    'Mushroom',
    'Onion',
    'Pepperoni',
    'Sausage',
    'Tomato'
  ];
  selectedByDefault;
  toppings: FormControl;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.toppings = new FormControl(this.selectedByDefault);
    this.dataService.selectedValues$
      .subscribe(values => this.toppings.setValue(values));
  }

}

---

Вот вам Рабочий пример StackBlitz для вашей ссылки.

Answer 2

Это простой вопрос установки значений формы по умолчанию.При инициализации вашей группы FormGroup просто передайте значения, которые вы хотите отобразить как «отмеченные», и убедитесь, что они точно совпадают.

Рабочий стекблиц -> https://angular -r2y6gk.stackblitz.io