Angular 如何将“初始值”设置为“角度材质材质”“选择多个”

如何将初始值设置为使用对象列表作为选项的“角度材质mat select multiple”。代码可以在上找到并运行

以下是HTML：

<form [formGroup]="formGroup">
    <mat-form-field>
        <mat-label>Toppings</mat-label>
        <mat-select formControlName="toppings" multiple>
            <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping.name}}</mat-option>
        </mat-select>
    </mat-form-field>
</form>

---

看起来你必须通过整个物体

替换

    this.formGroup.controls.toppings.setValue([{ id: 1 }]);

与

---

如果尝试绑定整个对象，将通过比较对象的引用来检查对象是否已被选中。我建议您绑定对象的id，因为它是唯一的：

this.formGroup.controls.toppings.setValue（[1]）
和html格式
{{topping.name}}
让你的闪电战有效

下面是一个工作示例


.html

 <form [formGroup]="formGroup">
    <mat-form-field>
        <mat-label>Toppings</mat-label>
        <mat-select formControlName="toppings" multiple   (selectionChange)=" showSelectValue($event.value)">
            <mat-option  *ngFor="let topping of toppingList" [value]="topping.name"
      >{{topping.name}}</mat-option>
        </mat-select>

    </mat-form-field>
   <p>You selected: {{selected}}</p>
</form>

您可以在this.formBuilder.group（例如列表的第2项和第4项）中设置初始值，如下所示

和html格式

<mat-option *ngFor="let topping of toppingList" [value]="topping.id">{{topping.name}}</mat-option> makes your stackblitz work

{{topping.name}}使您的stackblitz工作

 <form [formGroup]="formGroup">
    <mat-form-field>
        <mat-label>Toppings</mat-label>
        <mat-select formControlName="toppings" multiple   (selectionChange)=" showSelectValue($event.value)">
            <mat-option  *ngFor="let topping of toppingList" [value]="topping.name"
      >{{topping.name}}</mat-option>
        </mat-select>

    </mat-form-field>
   <p>You selected: {{selected}}</p>
</form>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, Validators } from '@angular/forms';

/** @title Select with multiple selection */
@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
  styleUrls: ['select-multiple-example.css'],
})
export class SelectMultipleExample implements OnInit {
        selected: any[];

      constructor(private formBuilder: FormBuilder) { }
      formGroup = this.formBuilder.group({ 'toppings': [null, Validators.required] });
      toppingList: any[] = [
        { id: 1, name: 'Extra cheese' },
        { id: 2, name: 'Mushroom' },
        { id: 3, name: 'Onion' },
        { id: 4, name: 'Pepperoni' },
        { id: 5, name: 'Sausage' },
        { id: 6, name: 'Tomato' }
      ];

      ngOnInit() {
        this.formGroup.controls.toppings.setValue(this.selected);
      }

      showSelectValue(mySelect)
      {
        this.selected=mySelect;
        console.log(mySelect);
      }
    }


/**  Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

 formGroup = this.formBuilder.group({ 'toppings': [[1, 3], Validators.required] });

<mat-option *ngFor="let topping of toppingList" [value]="topping.id">{{topping.name}}</mat-option> makes your stackblitz work