Angular响应式表单select设置关联对象默认值问题

你现在的写法逻辑完全错了：给所有id不匹配的option都绑定了persons[0]作为值，同一个值对应多个选项，Angular无法正确匹配选中项，自然实现不了默认选中效果。

Angular 响应式表单的 select 绑定对象值时，不需要在 option 的 [ngValue] 上写任何判断逻辑做默认选中，默认选中的控制权完全在表单控件的持值上。

• 第一步：修正模板代码，option 只绑定当前遍历到的person对象即可，删掉多余的三元判断：

<select
  formControlName="person"
  id="person">
    <option
      *ngFor="let person of persons"
      [ngValue]="person">
        {{ person.name }}
    </option>
</select>

• 第二步：在组件逻辑中，等下拉选项列表persons和当前编辑的promoter数据都加载完成后，从persons数组里找到和promoter.personid一致的项，直接赋值给对应的表单控件，Angular会自动完成选中状态匹配：

// 数据加载完成后执行
// 必须从persons数组里找匹配项，保证对象引用一致
const targetPerson = this.persons.find(p => p.id === this.promoter.person.id);
// 给表单设值，这一步执行完下拉就会默认选中对应项
this.yourForm.get('person').setValue(targetPerson);

• 不要直接把后端返回的promoter.person对象直接设给表单控件：哪怕它和persons里的项id、属性完全一致，只要不是同一个对象引用（内存地址不同），Angular就识别为不匹配，会出现选不中的问题。
• 不要在*ngFor渲染option的时候修改[ngValue]的绑定值，会直接破坏选项和值的映射关系，导致后续选值、读值全部错乱。

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