Angular 16.1.4动态加载组件中ngFor无法渲染问题排查求助

问题重现 #

动态加载的组件中，数组长度{{components.length}}能正确显示为2，但*ngFor遍历的内容完全不渲染，浏览器仅输出「START BREADCRUMB: 2 END」；非动态加载组件的*ngFor功能正常，控制台无报错。

用户模板代码：

START BREADCRUMB: {{components.length}}
   <span *ngFor='let component of components;'>
      {{component.title}}
   </span>
END

排查方向 #

• 检查变更检测策略
  若动态组件设置了ChangeDetectionStrategy.OnPush，当数组是原地修改（如push、splice）时，Angular不会自动触发变更检测。可以临时将组件的变更检测策略改为ChangeDetectionStrategy.Default测试，或者通过扩展运算符（this.components = [...this.components, newItem]）创建新数组来更新引用，也可以手动注入ChangeDetectorRef调用detectChanges()。

• 验证数组元素结构
  虽然数组长度为2，但可能元素不存在title属性，或属性名存在大小写错误（比如Title而非title）。可以在模板中添加{{component | json}}打印完整对象，确认字段是否正确：

  <span *ngFor='let component of components;'>
     {{component | json}} - {{component.title}}
  </span>
  

• 确认模块依赖导入
  动态组件所属的NgModule必须导入CommonModule（*ngFor属于该模块的内置指令）。如果动态加载时的模块未导入CommonModule，指令会静默失效，控制台不会抛出错误。

• 检查组件实例的数据赋值时机
  确保components数组是在组件初始化完成后赋值（比如在ngOnInit中，而非构造函数内的异步操作未完成阶段）。可以在组件类中添加console.log(this.components)，确认渲染时数组已有正确内容。

• 排查DOM与样式隐藏问题
  打开浏览器开发者工具的Elements面板，确认*ngFor生成的<span>元素是否存在于DOM中。有可能元素已渲染，但被CSS样式（如display: none、visibility: hidden）隐藏。

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