Angular 15中*ngFor未渲染已有数组内容问题排查

算力阿峰

2026-7-26

问题原因分析

这是Angular OnPush变更检测模式下，*ngFor指令和插值表达式的更新逻辑差异导致的：

插值表达式（{{fields | json}}）：每次触发变更检测时，都会直接读取当前fields的最新值，执行管道转换后更新DOM——不管fields初始状态是什么，只要值发生变化就能同步显示。
*ngFor指令：如果初始时fields是undefined或null，Angular在首次变更检测时会跳过该模板节点的创建（相当于<th>的渲染逻辑根本没初始化）。后续你给fields赋值数组并调用detectChanges()时，Angular的变更检测只会更新已存在的DOM节点，不会重新初始化之前被跳过的*ngFor视图容器，所以即使ng-reflect-ng-for-of显示数组存在，也不会渲染对应的<th>元素。
而当你给fields初始化为空数组时，首次变更检测就会创建*ngFor的视图容器，后续数组更新时，变更检测能正常识别到数组的变化（引用或内容），从而渲染对应的元素。

解决方法

你可以任选以下一种方式解决：

给fields设置初始空数组：在组件类中直接初始化fields: any[] = [];，不要让它处于undefined或null状态。这样*ngFor的视图容器在首次渲染时就会被创建，后续赋值新数组时，只要触发变更检测就能正常更新。
强制触发视图状态更新：如果必须保持fields初始为undefined，赋值数组后除了调用detectChanges()，还可以调用changeDetectionRef.markForCheck()，同时确保赋值时使用不可变操作（比如用扩展运算符创建新数组，让数组引用发生变化）：
```
reloadFields() {
  // 用不可变方式生成新数组，确保引用更新
  this.fields = [...yourNewFieldsData];
  this.changeDetectionRef.markForCheck();
  this.changeDetectionRef.detectChanges();
}
```
改用async管道（若fields为Observable）：如果你的fields是从Observable流获取的，直接在模板中使用*ngFor="let field of fields | async"，async管道会自动处理变更检测逻辑，即使初始值为null也能正常触发视图更新。