Angular 5.2.0递归ngFor循环中ng-template上下文为空问题排查

咱们先聚焦核心问题：Angular 5里ngTemplateOutlet的上下文传递和递归模板写法有特定要求，你之前遇到的“仅渲染第一层级、子分类无数据甚至全空白”，大概率是递归时上下文没正确传递子节点数据，加上可能的初始化时机问题导致的。

1. 先对齐你的分类数据结构（假设简化版是这样） #

先确认你的数据格式没问题，比如：

categories = [
  {
    name: '科技图书',
    children: [
      { name: '前端开发', children: [{ name: 'Angular实战' }] },
      { name: '后端开发' }
    ]
  },
  {
    name: '文学图书',
    children: [{ name: '古典文学' }]
  }
];

2. 修正递归模板的写法（核心解决方法） #

方案一：用隐式上下文（$implicit） #

这是Angular里递归模板最常用的写法，把要传递的数据放在$implicit属性里，模板用let-xxx接收：

<!-- 主容器，触发递归模板 -->
<ul>
  <ng-container *ngTemplateOutlet="categoryTpl; context: { $implicit: categories }"></ng-container>
</ul>

<!-- 递归模板定义 -->
<ng-template #categoryTpl let-items>
  <li *ngFor="let item of items">
    <!-- 显示当前分类名称 -->
    {{ item.name }}
    <!-- 有子分类时，递归调用模板，传递子节点作为上下文 -->
    <ul *ngIf="item.children && item.children.length > 0">
      <ng-container *ngTemplateOutlet="categoryTpl; context: { $implicit: item.children }"></ng-container>
    </ul>
  </li>
</ng-template>

方案二：用显式上下文属性（对应你之前的let-list="list"写法） #

如果你偏好显式命名，要确保递归时把当前节点的children传给下一层的同名属性：

<ul>
  <ng-container *ngTemplateOutlet="categoryTpl; context: { list: categories }"></ng-container>
</ul>

<ng-template #categoryTpl let-list="list">
  <li *ngFor="let item of list">
    {{ item.name }}
    <ul *ngIf="item.children?.length">
      <!-- 重点：这里要把item.children传给下一层的list属性 -->
      <ng-container *ngTemplateOutlet="categoryTpl; context: { list: item.children }"></ng-container>
    </ul>
  </li>
</ng-template>

你之前只渲染第一层级，很大可能是递归时没把item.children传递给下一层的list，导致子分类没有数据源。

3. 排查控制台错误的关键要点 #

如果控制台还有报错，先对应解决：

• Cannot read property 'children' of undefined：说明你传递的上下文数据是undefined，要确保categories数组在组件初始化时已经赋值（比如在ngOnInit里同步赋值，异步加载的话要用*ngIf或async管道等待数据）。
• 模板解析错误：检查ngTemplateOutlet的语法，Angular 5里是*ngTemplateOutlet，上下文属性是context（别拼写成contexts）。

4. 异步数据的处理（如果你的分类是接口获取的） #

如果数据是异步请求来的，一定要确保数据加载完成后再渲染：

<!-- 用*ngIf判断数据是否存在 -->
<ul *ngIf="categories">
  <ng-container *ngTemplateOutlet="categoryTpl; context: { $implicit: categories }"></ng-container>
</ul>

<!-- 或者用async管道（适用于Observable类型的数据源） -->
<ul>
  <ng-container *ngTemplateOutlet="categoryTpl; context: { $implicit: categories$ | async }"></ng-container>
</ul>

按照上面的方法调整后，应该就能正常渲染出完整的树形分类结构了，第一层级和子分类都会正确显示。

内容的提问来源于stack exchange，提问作者Serhii Ka.