Angular 4中*ngFor与<option [selected]>结合时选中状态失效问题

这个问题我之前也碰到过，本质是Angular响应式表单的状态接管机制在起作用——你手动设置的[selected]会被表单控件的状态给覆盖掉，所以才会失效。

问题原因 #

当你使用formControlName绑定响应式表单控件时，<select>的选中状态完全由对应的FormControl的值决定。此时手动给<option>添加[selected]属性，Angular的表单系统会忽略这个手动设置，优先使用控件自身的状态，导致你期望的选中效果不生效。

正确解决方案 #

只需要通过初始化FormControl的默认值来指定选中项，同时移除<option>上的[selected]属性即可：

1. 组件类中设置FormControl初始值

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  myForm: FormGroup;
  nationalityList = [
    { code: 'CHN', description: '中国' },
    { code: 'ITA', description: '意大利' },
    // 其他国家选项
  ];

  ngOnInit() {
    // 初始化表单时，给nationality控件设置默认值为'ITA'
    this.myForm = new FormGroup({
      nationality: new FormControl('ITA')
    });
  }
}

2. 修改模板代码（移除[selected]）

<form [formGroup]='myForm'>
  <div class="col-sm-9 col-md-4">
    带*ngFor时选中正常
    <select formControlName="nationality" class="form-control">
      <option *ngFor="let elem of nationalityList" [ngValue]="elem.code">
        {{ elem.description}}
      </option>
    </select>
  </div>
</form>

额外说明 #

如果是使用模板驱动表单（ngModel）的场景，你可以通过[(ngModel)]绑定选中值，同样不需要手动设置[selected]：

<select [(ngModel)]="selectedNationality" class="form-control">
  <option *ngFor="let elem of nationalityList" [ngValue]="elem.code">
    {{ elem.description}}
  </option>
</select>

然后在组件类中定义selectedNationality = 'ITA';即可。

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