如何使用 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

这是默认表单值的简单问题。初始化您的 FormGroup 时，只需传入您希望显示为 "checked" 的值，确保与这些值完全匹配。

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

Answer 2

由于响应来自 API，您将异步接收响应。

在这种情况下，您可以在 FormControl 实例或 FormGroup 实例上调用 setValue 方法以设置默认值。

像这样：

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

}

Here's a Working Sample StackBlitz for your ref.

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

How to set an option true/false with mat-select (multiselect) Angular Material

multi-select

typescript

angular