如何设置选项真/假与垫选择（多选）角材料

Question

我用了从材料角度多重选择。

<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>

我希望把真或假的一些选项，我想，我不知道怎么办。

后前

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));
  }

}

---

以下是为您的参考一Working Sample StackBlitz。

Answer 2

这是违约的形式值的简单的事情。当初始化你FormGroup，只是通过在哪些值你想显示为“检查”，确保完全匹配的值。

工作stackblitz - > https://angular-r2y6gk.stackblitz.io