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

Question

我在用什么

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

我正在努力实现的目标

• 当用户在某些输入中填写一些细节时，我会看到一个包含许多选项的下拉菜单

• 我想选择一个默认选项（不是占位符，而是实际选择）

题

1. 在遍历数组（ngFor）时，如何将“ selected”属性应用于选项之一？ 例如，假设数组包含“专辑1”，“专辑2”和“专辑3”。 默认情况下，我希望自动选择“专辑2”。

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

Answer 1

您可以将选择元素绑定到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>

注意：

这种方法不使用双向绑定。 这是您当前已实现的单向绑定。 如果您希望使用双向绑定（通常更加优雅），我强烈建议您更深入地研究表单模型。