Angular动态选项场景下select值绑定失效问题咨询

直接用[value]给动态渲染的select设置预选中失效，核心原因是变更检测的时机差：

• 静态示例里，所有<option>是模板编译时就存在的DOM节点，当Angular初始化绑定[value]="'green'"时，能立刻找到对应value的选项并设置选中状态。
• 动态示例里，*ngFor渲染<option>是在组件初始化后的第一个变更检测周期才完成的，而[value]="'blue'"的绑定是在更早的阶段执行的——这时候DOM里还没有value为blue的选项，自然无法触发预选中。

解决办法 #

方法1：使用ngModel双向绑定

这是最简洁的方案，ngModel会自动在DOM更新后同步选中状态：

组件代码：

colors = [ 'red', 'green', 'blue' ];
selectedColor = 'blue'; // 预选中的值

模板代码：

<select [(ngModel)]="selectedColor">
  <option value="">Select:</option>
  <option *ngFor="let color of colors" [value]="color"> 
    {{ color }}
  </option>
</select>

方法2：使用响应式表单FormControl

如果是表单场景，推荐用响应式表单，它对DOM变化的监听更可靠：

组件代码：

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

@Component({
  selector: 'app-root',
  templateUrl: './main.component.html'
})
export class MainComponent {
  colors = [ 'red', 'green', 'blue' ];
  colorControl = new FormControl('blue'); // 初始化设置预选中值
}

模板代码：

<select [formControl]="colorControl">
  <option value="">Select:</option>
  <option *ngFor="let color of colors" [value]="color"> 
    {{ color }}
  </option>
</select>

方法3：延迟设置value（不推荐）

如果不想用表单相关方案，可以通过延迟执行来等待*ngFor渲染完成：

组件代码：

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

@Component({
  selector: 'app-root',
  templateUrl: './main.component.html'
})
export class MainComponent implements OnInit {
  colors = [ 'red', 'green', 'blue' ];
  selectedValue = '';

  ngOnInit() {
    // 延迟到下一个变更检测周期设置值
    setTimeout(() => {
      this.selectedValue = 'blue';
    }, 0);
  }
}

模板代码：

<select [value]="selectedValue">
  <option value="">Select:</option>
  <option *ngFor="let color of colors" [value]="color"> 
    {{ color }}
  </option>
</select>

这个方案依赖定时器，不够优雅，只适合临时调试使用。

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