在 for 循环中选择 mat-select，在下拉列表中设置“选定” - 角度

Question

我正在循环浏览我的 html 中的“menuOptions”，以便在 mat-accoridion（角度材料 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 Examples 的以下StackBlitz 很好地说明了这一点。