时间戳

首页 > 解决方案 > mat-select：以编程方式预选项目

angular - mat-select：以编程方式预选项目

问题描述

我试图弄清楚如何在对话框中显示垫选择并预先选择一些垫选项。我创建了一个简单的示例来演示我想要做什么：

StackBlitz

在我的示例中，我想显示一个可选择的颜色列表，其中预先选择了一些颜色。我首先通过迭代对话框的 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”：我希望在显示对话框时预先选择这些项目。我似乎无法找到/弄清楚如何做到这一点。

预先感谢您的帮助！

标签： angularangular-reactive-formsangular-formsangular-material-7

解决方案

由于您正在使用ReactiveForms，您可以使用默认值属性FormControl来设置mat-select.

this.defaultSelections = ['red', 'green', 'blue'];

this.form = this.formBuilder.group({
  selectedColors: [this.defaultSelections]
});

一个工作示例。

推荐阅读