在for循环中进行mat-select，在下拉列表中设置“selected” - angular

Question

我在我的 html 中循环我的“menuOptions”，以便在 mat-accordion（一个有角度的材料 api）的下拉菜单中输出多个选项

我希望该值是每个选择下拉列表中的值，因此我将 [(value)] 设置为 for 循环中的元素（如下所示）

<mat-option *ngFor="let option of menuOptions" [value]="option" (click)="selectConfig(option)">
      {{option}}
</mat-option>

但是，我希望在第一次加载时自动选择一个....（自动选择数组 menuOption 中的第一个菜单选项）我不能只在我的打字稿文件中设置选项，因为我只有 menuOptions（数组）可用。 option 是我在 for 循环中循环的元素。

任何想法如何以另一种方式设置选项？

谢谢！

Answer 1

选定的值需要在封闭的mat-select元素中定义。

<mat-select [value]="selectedMenuOption">

这假定您的组件中有一个名为selectedMenuOption的公共成员。

通过[(value)]定义双向绑定时，您甚至可以摆脱为mat-option元素定义的click事件处理程序。

<mat-select [(value)]="selectedMenuOption">

以下来自Angular Material 示例的StackBlitz很好地说明了这一点。