Angular中[selected]属性对一个select生效另一个不生效的原因？

问题原因 #

你犯了一个响应式表单赋值的常见错误：在patchValue中给表单控件传了数组格式的值，而你下拉选项绑定的ngValue是数字类型的id，二者格式/类型不匹配导致选中失效。
gender下拉能生效是JS隐式类型转换的巧合：[2] == 2在非严格相等判断下返回true，但只要后端返回的team字段类型稍有不同（比如是字符串格式的数字、或者值对应错位），就会匹配失败。

另外你使用formControlName绑定响应式表单控件的前提下，完全不需要手动写[selected]绑定逻辑，Angular会自动根据控件值匹配下拉选项，手动绑定反而可能和表单自动逻辑冲突。

修复方案 #

第一步：修正patchValue的赋值逻辑 #

patchValue直接给控件传实际值即可，不需要套数组（只有用formBuilder初始化控件时，数组是「默认值+验证器」的配置格式，赋值的时候不需要），同时确保team的类型和你定义的teams数组id类型对齐：

// 修改ngOnInit里的patchValue部分
this.employeeForm.patchValue({
  name: people.name,
  gender: people.gender, // 去掉外层[]
  birthDate: new Date(people.birthDate),
  email: people.email,
  startDate: new Date(people.startDate),
  cpf: people.cpf,
  team: Number(people.team) // 去掉外层[]，同时转成数字，确保和teams的id类型一致
});

第二步：删掉模板中多余的[selected]绑定 #

既然用了响应式表单，formControl会自动处理选中逻辑，直接简化模板即可：

<!-- 性别下拉 -->
<select class="form-control" id="gender" formControlName="gender">
  <ng-container *ngFor="let genderEl of genders">
    <option [ngValue]="genderEl.id">{{genderEl.name}}</option>
  </ng-container>        
</select>

<!-- 团队下拉 -->
<select class="form-control" id="team" formControlName="team">                
  <ng-container *ngFor="let teamEl of teams">
    <option [ngValue]="teamEl.id">{{teamEl.name}}</option>
  </ng-container>
</select>

可选校验 #

如果修改后还是不生效，可以在patchValue之前打印console.log(typeof people.team, people.team)，确认后端返回的team值是否和你teams数组里的id对应，避免出现枚举值错位的情况。

内容的提问来源于stack exchange，提问作者Henrique N. Mendes