角度材质:使用反应形式为对象选择选择多个默认值

Question

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

默认选择可以很好地处理字符串(下面的例子中是苏打水(，默认项目显示为选中图标，mat-select元素值已加载它们，如果我添加更多项目，它们将添加到值字段中的现有项目中。

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

有没有什么方法可以让我在UI选择框中选中预先选择的项目，并将新添加的项目添加到垫子选择元素的现有值中？

提前感谢

下面是示例代码-

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 {
drinkCategory: FormGroup;
sodaList =['coke','pepsi','sprite'];
selecteSodas =['coke','sprite'];
energyDrinksList=[{
id:'1',
name:'redbull'
},{
id:'2',
name:'monster'
},{
id:'3',
name:'gatorade'
}];
selectedEnergyDrinks=[{
id:'1',
name:'redbull'
}];
constructor(private fb: FormBuilder){}
ngOnInit() {
this.drinkCategory = this.fb.group({
sodaName: [null, Validators.required],
energyDrinkName:[null, Validators.required]
});
this.drinkCategory.get('sodaName').setValue(this.selecteSodas);
this.drinkCategory.get('energyDrinkName').setValue(this.selectedEnergyDrinks);
}
}

UI垫子选择元素的屏幕截图

Answer 1

您需要使用compareWith函数来按id比较选项。

将功能添加到组件：

compareWith(drink1: any, drink2: any): boolean {
return drink1 && drink2 && drink1.id === drink2.id;
}

然后将其设置为两个MatSelect控件上的compareWith值：

<form [formGroup]="drinkCategory">
<mat-form-field class="full-width">
<mat-select multiple formControlName="sodaName" [compareWith]="compareWith">
<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"
[compareWith]="compareWith"
>
<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>