Angular中如何将对象绑定到select选项值？解决ngValue取值异常

你遇到的问题本质是原生DOM的select元素只能处理字符串值，而[ngValue]是Angular封装的用来绑定复杂对象的属性，但直接通过$event.target.value获取的是原生DOM的value（也就是渲染到页面的文本，这里是friend.userName），所以拿不到完整对象。下面给你两种可行的解决方案：

方案一：使用[(ngModel)]双向绑定（推荐） #

这是最符合Angular风格的做法，直接通过ngModel绑定选中的对象，不需要依赖原生事件的target值：

模板代码 #

<select class="friend-input" [(ngModel)]="selectedFriend" (change)="selectFriend()">
  <option disabled selected>Select a friend...</option>
  <option *ngFor="let friend of friends" [ngValue]="friend">
    {{ friend.userName }}
  </option>
</select>

组件代码 #

export interface Friends {
  userUid: string;
  userName: string;
}

friends: Friends[];
selectedFriend: Friends; // 用来存储选中的完整对象

selectFriend() {
  console.log(this.selectedFriend); // 这里就能拿到包含userUid和userName的完整对象了
}

方案二：使用模板引用变量获取选中对象 #

如果你不想用ngModel，也可以通过模板引用变量直接获取Angular绑定的选项值，而不是原生DOM的value：

模板代码 #

<select #friendSelect class="friend-input" (change)="selectFriend(friendSelect.value)">
  <option disabled selected>Select a friend...</option>
  <option *ngFor="let friend of friends" [ngValue]="friend">
    {{ friend.userName }}
  </option>
</select>

组件代码 #

export interface Friends {
  userUid: string;
  userName: string;
}

friends: Friends[];

selectFriend(selectedFriend: Friends) {
  console.log(selectedFriend); // 同样能拿到完整对象
}

为什么之前的方法不行？ #

• 当你用[value]="friend"时，原生DOM会把对象转成字符串，所以得到[object Object]；
• 当你用[ngValue]="friend"但通过$event.target.value获取时，拿到的是原生select元素的value属性，也就是选项显示的文本（friend.userName），而不是Angular绑定的对象；
• Angular的[ngValue]是通过内部的NgSelectOption指令把对象和选项关联起来的，只有通过Angular提供的绑定方式（ngModel或模板引用变量）才能正确获取到绑定的对象。

内容的提问来源于stack exchange，提问作者Alan S