Angular 13中<select>结合ngFor与[value]时默认选中失效问题

这不是Bug，是Angular变更检测与指令渲染时机导致的用法问题：

核心原因 #

静态<option>在组件初始渲染时就已存在于DOM中，当<select>的[value]被设置为nrSelect（值为"B"）时，能立刻找到对应选项并完成选中。

但*ngFor是结构性指令，它的渲染逻辑在组件初始变更检测之后才执行——也就是<select>已经完成[value]赋值时，*ngFor还未生成对应的<option>元素。等*ngFor渲染完选项后，<select>的[value]不会自动重新触发匹配，因此无法选中目标选项。

而[(ngModel)]属于Angular表单模块指令，它会在每次变更检测周期内同步值与表单控件状态，包括*ngFor渲染完成后的后续检测，所以能在选项生成后正确匹配选中。

解决方案 #

1. 推荐使用[(ngModel)]（或单向绑定[ngModel]） #

这是Angular官方推荐的表单控件绑定方式，能自动处理变更检测与控件状态同步：

<select [ngModel]='nrSelect' class='form-control'>
  <option *ngFor="let option of options" [value]='option.value'>{{option.label}}</option>
</select>

需确保组件所在模块已导入FormsModule。

2. 手动确保选项渲染后再设置value #

若不想依赖表单模块，可在ngAfterViewInit钩子中设置select的value，此时*ngFor已完成渲染：

import { AfterViewInit, ElementRef, ViewChild } from '@angular/core';

// 组件类内添加
@ViewChild('selectWithNgFor') selectWithNgFor!: ElementRef<HTMLSelectElement>;

ngAfterViewInit(): void {
  this.selectWithNgFor.nativeElement.value = this.nrSelect;
}

模板中给select添加模板引用：

<select #selectWithNgFor class='form-control'>
  <option *ngFor="let option of options" [value]='option.value'>{{option.label}}</option>
</select>

3. 利用ChangeDetectorRef手动触发变更检测 #

在options数据加载完成后，手动触发变更检测，让<select>的[value]重新匹配：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

// 假设options为异步加载，加载完成后执行：
loadOptions(): void {
  this.options = [/* 你的选项数据 */];
  this.cdr.detectChanges();
}

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