Как установить начальное значение в Angular Material mat-select несколько

Question

Как установить начальное значение в Angular Material mat-select множественный, который использует список объектов для опций. Код можно найти и запустить на stackblitz

Вот 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>

Вот машинопись:

@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
  styleUrls: ['select-multiple-example.css'],
})
export class SelectMultipleExample implements OnInit {
  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' }
  ];

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

Answer 1

Похоже, вы должны передать весь объект.

Заменить

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

на

    this.formGroup.controls.toppings.setValue([this.toppingList[0]]);

Answer 2

Если вы попробуете связать весь объект angular, проверите, что объекты выбраны, сравнив их ссылку. Я советую вам привязать идентификатор объекта, так как он уникален: this.formGroup.controls.toppings.setValue([1]); и в HTML <mat-option *ngFor="let topping of toppingList" [value]="topping.id">{{topping.name}}</mat-option> заставляет ваш стек работать

Answer 3

вот рабочий пример

рабочий пример

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

.ts

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