如何使用mat-select（multiselect）Angular Material设置选项true / false

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

}

---

  

这是您推荐的Working Sample StackBlitz。

Answer 2

这是一个简单的默认表单值问题。初始化FormGroup时，只需传递要显示为“已检查”的值，并确保这些值完全匹配。

正在工作的堆栈闪电-> https://angular-r2y6gk.stackblitz.io