Angular 5中<select>双向数据绑定失效，编辑模式下拉框选中值不显示

嘿，我来帮你搞定这个下拉框绑定的坑！你遇到的问题其实是Angular处理对象绑定的一个常见点——对象引用匹配的问题，咱们一步步来解决：

问题根源分析 #

你用[ngValue]绑定了完整的type对象，这本身没问题，但编辑模式下，你直接把API返回的data[0].type赋值给了selectedTypes。这个API返回的对象和你*ngFor循环的attributeTypes数组里的对象，虽然属性完全一样，但它们是不同的对象实例（引用不同）。Angular判断下拉框选中状态时，是通过对象引用来匹配的，不是属性值，所以即使title相同，也不会自动选中对应的选项。另外你手动加的[selected]逻辑不仅多余，还可能和[(ngModel)]的自动绑定冲突，反而出问题。

解决方案步骤 #

1. 清理HTML中的冗余代码

先把option标签上的[selected]属性删掉，让[(ngModel)]全权处理选中状态：

<select class="w3-input dropDown form-control" [(ngModel)]="selectedTypes" name="option" (change)="onSelectedType()">
  <option *ngFor="let type of attributeTypes" [ngValue]="type"> {{type.title}}</option>
</select>

2. 匹配对象引用（关键！）

不要直接把API返回的对象赋值给selectedTypes，而是从attributeTypes数组里找到对应的对象实例。这里需要用对象的唯一标识（比如_id，你API返回的数据里应该有这个字段吧？）来匹配：

this.http.get(this.localClient + "attributes?q[_id]=" + this.attributeId, { headers: this.rqstHeader })
  .map(res => res.json())
  .subscribe(data => {
    this.attribute.title = data[0].title;
    // 用唯一ID从attributeTypes数组中找到匹配的对象实例
    this.selectedTypes = this.attributeTypes.find(type => type._id === data[0].type._id);
    console.log(data);
  });

额外注意点 #

• 确保attributeTypes数组在执行这段代码之前已经加载完成！如果attributeTypes也是从API获取的，要保证它的请求先完成，或者用forkJoin等方式并行获取两个接口的数据，等所有数据都到位了再赋值selectedTypes，不然find可能返回undefined。
• 如果你的type对象没有_id这种唯一标识，也可以用title来匹配，但要注意title必须是唯一的，不然会匹配到错误的选项。

这样修改后，下拉框就能正确显示编辑模式下的对应类型，双向绑定也能正常工作啦！

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