Angular：如何在选择输入上设置默认选择

Question

我正在使用

• 角
• 火力
• 目前，标准HTML选择组件

我想要实现的目标

• 当用户在某些输入中填写一些详细信息时，我有一个包含许多选项的下拉列表

• 我希望选择默认选项（不是占位符，实际选择）

问题

1. 当我循环遍历一个数组（ngFor）时，如何应用“选择”＆＃39;属性到其中一个选项？让我们举例来说，该阵列包含了专辑1＆＃39;专辑2＆＃39;专辑3＆＃39;。默认情况下，我想要专辑2＆＃39;自动选择。
＆＃13;
＆＃13;
<select #selectedAlbum>
<option *ngFor="let album of albumList" [value]="folder.folder_title">{{album.album.title}}</option>
</select>
＆＃13;
＆＃13;
＆＃13;

Answer 1

您可以将select元素绑定到ngModel，然后在组件初始化时将ngModel设置为所需的默认值，并通过ngModel提供的双向绑定为您选择该选项。

即：

<select #selectedAlbum [(ngModel)]="mySelectedItem">

并在您的组件中：

 mySelectedItem: string;

  ngOnInit() {
    this.mySelectedItem = 'album 2';
  }

Answer 2

您可以添加所选属性：

使用预定义项目的示例

<select #selectedAlbum>
<option *ngFor="let album of albumList" [value]="folder.folder_title" [selected]="ablum.ablum.title === 'album 2'">{{album.album.title}}</option>
</select>

使用索引的示例

<select #selectedAlbum>
<option *ngFor="let album of albumList; let i = index;" [value]="folder.folder_title" [selected]="i === 1">{{album.album.title}}</option>
</select>

注意：

此方法不使用双向绑定。这是您目前已实施的单向绑定。如果你更喜欢使用双向绑定（一般来说更优雅），我强烈建议深入挖掘表单模型。