Angular 11 select绑定自定义对象时change事件始终返回默认值如何解决

问题核心原因 #

模板内<option>的[ngValue]属性绑定错误，当前所有下拉选项都绑定了同一个值selectedQuery（即初始默认对象），因此无论切换到哪个选项，双向绑定的selectedQuery都不会更新，事件返回的永远是默认值。

修复方案 #

1. 修正模板绑定 #

将<option>的[ngValue]从绑定selectedQuery改为绑定循环遍历的当前项opt，修改后的component.html代码如下：

<div class="selectClass">
    <select [(ngModel)]="selectedQuery" (change)="onQueryChange(selectedQuery)">
            <option *ngFor="let opt of myQueries" [ngValue]="opt"> {{opt.myQueryString}}</option>
     </select>       
</div>

修改后每个下拉选项对应的值就是myQueries数组里的对应对象，选中后selectedQuery会自动同步为选中的对象。

2. 可选优化 #

• 已经使用[(ngModel)]双向绑定的情况下，不需要额外把selectedQuery作为参数传给change事件，直接在方法内访问this.selectedQuery即可拿到最新值，代码可简化：
  模板简化：

<select [(ngModel)]="selectedQuery" (change)="onQueryChange()">

对应ts方法修改：

onQueryChange() {
    console.log('当前选中对象', this.selectedQuery);
}

• Angular表单中使用ngModel必须配合name属性，否则可能出现控制台警告，建议给select标签加name属性：

<select name="querySelector" [(ngModel)]="selectedQuery" (change)="onQueryChange()">

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