Angular 2中带formControlName的select标签设置值后不生效问题

嘿，我明白你遇到的问题了——给FormControl设置好值后，select控件却没同步显示对应的选项对吧？这其实是因为你的select选项和FormControl的值没正确匹配上，我来一步步帮你搞定：

问题根源 #

你的pmsList是对象数组，但当前select选项只渲染了item.pms的文本，没有绑定对应的值。而且你用setValue传入的是整个对象，但默认情况下select的选项值是字符串类型，两者类型不匹配，控件自然找不到对应的选中项。

解决方案一：绑定选项的ID值（简单直接） #

这种方法适合只需要跟踪选中项ID的场景：

1. 修改HTML中的select选项，绑定[value]为item的id：

<select formControlName="pms" class="form-control down-arrow">
  <option value="">Select</option>
  <option *ngFor="let item of pmsList" [value]="item.id">{{item.pms}}</option>
</select>

2. 在组件中设置FormControl的值为对应item的id（而非整个对象）：

this.pms.setValue(1); // 传入你想要选中的item的id

解决方案二：绑定整个对象（使用compareWith） #

如果需要在FormControl中保留完整的对象，就得用compareWith函数告诉Angular如何判断两个对象是否相等（默认是引用比较，内容相同但引用不同也会被判定为不同）：

1. 修改HTML，用[ngValue]绑定整个对象，并添加[compareWith]：

<select formControlName="pms" class="form-control down-arrow" [compareWith]="comparePms">
  <option value="">Select</option>
  <option *ngFor="let item of pmsList" [ngValue]="item">{{item.pms}}</option>
</select>

2. 在组件中定义comparePms函数，通过id比较对象：

comparePms(obj1: any, obj2: any): boolean {
  // 确保对象存在时比较id，否则直接判断是否相等
  return obj1 && obj2 ? obj1.id === obj2.id : obj1 === obj2;
}

3. 现在就可以直接用整个对象设置值了：

this.pms.setValue({id:1,pms:"test"});

这样修改后，select控件就能正确同步显示你设置的选项啦！

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