提问人：James A Cubeta 提问时间：2/26/2019 更新时间：2/27/2019 访问量：3906
mat-select：以编程方式预选项目
mat-select: Programmatically pre-selecting items
问：
我正在尝试弄清楚如何在对话框中显示 mat-select 并预先选择一些 mat-options。我创建了一个简单的示例来演示我想做什么：
在我的示例中，我想显示一个可选的颜色列表，其中预选了一些颜色。我首先通过遍历对话框的 TS 文件中的字符串数组来创建一个 mat-select 及其内容 （mat-options）：
<mat-select placeholder="Colors" formControlName="selectedColors" multiple>
<mat-option *ngFor="let color of allColors" value="{{color}}">{{color}}</mat-option>
</mat-select>
这很好用。在我的对话框的 TS 文件中，我声明了以下数组：
this.allColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
this.defaultSelections = ['red', 'green', 'blue'];
请注意第二个数组“defaultSelections”：我希望在显示对话框时预先选择这些项目。我似乎找不到/弄清楚如何做到这一点。
提前感谢您的帮助！
答：
1赞
VascoCC
2/27/2019
#1
由于您正在使用 ，因此可以使用默认值属性来设置 的初始值。ReactiveFormsFormControlmat-select
this.defaultSelections = ['red', 'green', 'blue'];
this.form = this.formBuilder.group({
selectedColors: [this.defaultSelections]
});
一个工作的例子。
评论
0赞
S. Karki
1/19/2022
如何在包含每个对象都有 id 的对象的数组中使用它？我是将对象存储在formbuilder数组中还是仅存储对象ID？
评论
selectedColors: [this.defaultSelections]selectedColors: []