小编emp*_*ate的帖子

我正在使用反应形式和角度材料垫选择来创建一个形式，并启用多重选择。我有一个要在垫选择中加载的对象列表，并且希望默认情况下预先选择该列表中的某些项目。

默认选择与字符串（下面的示例中的苏打水）配合良好，并且默认项目显示为选中图标，垫选择元素值已加载它们，如果我添加更多项目，它们将添加到值字段中的现有项目中。

但我想要在垫选择中加载的项目是对象（下面示例中的 energyDrinks），当我设置垫选择字段的值时，即使字段值设置正确，默认情况下也不会检查它们。另外，如果我添加一个项目，值字段中的现有数据将被新项目覆盖。

有什么方法可以让预选项目在 UI 选择框中选中，并让新添加的项目添加 mat-select 元素的现有值？

提前致谢

下面是示例代码 -

html-

<form [formGroup]="drinkCategory">

<mat-form-field class="full-width">
    <mat-select multiple formControlName="sodaName">
        <mat-option *ngFor="let soda of sodaList" [value]="soda">
            {{soda}}
        </mat-option>
    </mat-select>
</mat-form-field>

<p>{{drinkCategory.get('sodaName').value | json}}</p>


<mat-form-field class="full-width">
    <mat-select multiple formControlName="energyDrinkName">
        <mat-option *ngFor="let energyDrink of energyDrinksList" [value]="energyDrink">
            {{energyDrink.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

<p>{{drinkCategory.get('energyDrinkName').value | json}}</p>
</form>

.ts 文件 -

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

@Component({
  selector: 'drink-example',
  styleUrls: ['drink-example.css'],
  templateUrl: 'drink-example.html',
})
export class DrinkExample …