Angular 5中ngFor生成Select时ngModel默认值未选中问题咨询

我来帮你把这些Angular select绑定的疑问逐一拆解，刚好之前做项目时踩过一模一样的坑，分享下我的经验：

1. ngModel 和 ngValue 存在冲突吗？ #

完全不冲突！反而它们是绑定非字符串类型（比如对象）时的黄金搭档。

你遇到AZERTY没被默认选中的核心问题，根本不是这两个指令冲突，而是对象引用不匹配——Angular在对比ngModel绑定值和ngFor生成的选项值时，对于对象类型是按引用地址判断的，而不是按对象的属性值。举个例子：
如果你的组件代码是这样：

units = [{name: 'AZERTY'}, {name: 'QWERTY'}];
selectedUnit = {name: 'AZERTY'}; // 新建了一个对象，和units里的AZERTY不是同一个引用

哪怕两个对象的name完全一样，Angular也会认为它们是不同的，所以不会默认选中。

2. K1示例中，对象无法使用value属性是否正确？ #

非常正确！原生HTML的value属性只能接收字符串/基本数据类型（数字、布尔），如果你强行给value绑定对象，Angular会自动把对象转成字符串"[object Object]"，完全没法和ngModel的对象值匹配，所以绑定对象时必须用ngValue来传递完整的对象引用。

3. 模型为对象时默认值不显示的解决方案 #

你提到的“模型对应对象时无法显示默认值”（比如{{award.name | ...}}的场景），本质还是引用匹配的问题。这里给你三个实用的解决办法：

办法一：确保默认值和ngFor数组里的对象是同一引用 #

初始化默认值时，直接从循环的数组里取，而不是新建对象：

// 组件代码
units = [{name: 'AZERTY'}, {name: 'QWERTY'}];
selectedUnit = this.units[0]; // 直接取数组中的第一个对象，引用完全一致

这样ngModel就能直接匹配到对应的选项，默认选中就生效了。

办法二：用唯一标识（比如id）绑定，间接获取对象 #

如果没法保证引用一致（比如默认值是从接口单独获取的），可以绑定对象的唯一id，再通过id反向查找完整对象：

<!-- HTML代码 -->
<select [(ngModel)]="selectedUnitId">
  <option *ngFor="let unit of units" [value]="unit.id">{{unit.name}}</option>
</select>

// 组件代码
selectedUnitId: number;
defaultUnit = {id: 1, name: 'AZERTY'};

ngOnInit() {
  // 初始化时把默认对象的id赋值给selectedUnitId
  this.selectedUnitId = this.defaultUnit.id;
}

// 如果需要用到完整的unit对象，通过id从数组查找
getSelectedUnit() {
  return this.units.find(u => u.id === this.selectedUnitId);
}

办法三：用compareWith自定义比较逻辑（最推荐） #

Angular专门提供了compareWith指令来解决对象绑定的匹配问题，允许你自定义两个对象是否相等的判断规则（比如用id而不是引用）：

<!-- HTML代码 -->
<select [(ngModel)]="selectedAward" [compareWith]="compareAwards">
  <option *ngFor="let award of awards" [ngValue]="award">{{award.name | uppercase}}</option>
</select>

// 组件代码
selectedAward: Award = {id: 3, name: '年度最佳'};
awards: Award[] = [
  {id: 1, name: '月度优秀'},
  {id: 3, name: '年度最佳'},
  {id: 5, name: '季度明星'}
];

// 自定义比较函数：通过id判断两个对象是否相等
compareAwards(a1: Award, a2: Award): boolean {
  // 处理null/undefined的情况
  return a1 && a2 ? a1.id === a2.id : a1 === a2;
}

这个方法最灵活，哪怕默认对象和数组里的对象来自不同的请求，只要id一致，就能正确匹配默认选中项。

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