Question

我试图弄清楚如何在对话框中显示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”：在显示对话框时，我希望预先选择这些项目。我似乎无法找到/弄清楚该如何做。

预先感谢您的帮助！

Answer 1

由于使用的是ReactiveForms，因此可以在FormControl上使用默认值属性来设置mat-select的初始值。

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

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

有效的example。

垫选择：以编程方式预选择项目

1 个答案: