Angular *ngFor指令嵌套表格无内容显示问题求助

我看了你遇到的问题——用*ngFor渲染多层嵌套表格，结果浏览器里啥也不显示，还没报错，这种情况其实挺常见的，多半是几个容易忽略的小细节出了问题，我给你梳理下排查和解决的方向：

• 先确认数据源的结构与引用是否正确
  首先得确保你的嵌套数据是合法的数组结构，比如外层数组的每个元素都包含对应的子数组属性。举个例子，如果你的数据是这样的：

  parentData = [
    { id: 1, name: "父项1", children: [{ id: 11, value: "子项1-1" }, { id: 12, value: "子项1-2" }] },
    { id: 2, name: "父项2", children: [{ id: 21, value: "子项2-1" }] }
  ];
  

  那模板里内层的*ngFor必须写成*ngFor="let child of parent.children"，千万别把children写成别的名字（比如childs），否则会找不到数据。另外，你可以在组件里用console.log(this.parentData)打印数据，或者在模板里临时加一行{{ parentData | json }}，看看数据是不是真的加载进来了，有没有undefined或者null的情况。

• 检查嵌套表格的HTML结构是否合规
  HTML表格对结构要求很严格，<tr>必须放在<thead>、<tbody>或者<tfoot>里面，不能直接嵌套在另一个<tr>里。正确的嵌套表格写法应该是把内层表格放在<td>里，比如：

  <table>
    <tbody>
      <!-- 外层循环 -->
      <tr *ngFor="let parent of parentData">
        <td>{{ parent.name }}</td>
        <td>
          <!-- 内层嵌套表格 -->
          <table>
            <tbody>
              <tr *ngFor="let child of parent.children">
                <td>{{ child.value }}</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  

  如果结构不对，浏览器会自动修正DOM，导致*ngFor渲染的元素被隐藏，但不会抛出错误。

• 处理异步数据的订阅问题
  如果你的数据是通过HTTP请求或者Observable获取的，一定要记得用async管道来订阅数据，或者在组件里手动订阅并赋值。比如组件里的代码是：

  parentData$ = this.dataService.getParentData(); // 这是一个Observable
  

  那模板里必须写成：

  <tr *ngFor="let parent of parentData$ | async">
  

  要是忘了加async，*ngFor会遍历Observable对象本身，而不是里面的实际数据，自然不会渲染任何内容，也不会报错。

• 避免ngIf与ngFor的优先级冲突
  如果嵌套表格外面有*ngIf指令，要注意*ngIf的优先级比*ngFor高，如果*ngIf的条件为false，里面的*ngFor根本不会执行。另外，别把*ngIf和*ngFor放在同一个元素上，最好用<ng-container>来分开：

  <ng-container *ngIf="parentData">
    <table>
      <tr *ngFor="let parent of parentData">...</tr>
    </table>
  </ng-container>
  

  这样能确保数据存在的时候才会执行循环渲染。

• 验证嵌套循环的变量作用域
  内层循环里要确保能正确访问到外层循环的属性，比如外层是let parent of parentData，内层必须用parent.children，而不是直接写children——因为children是属于每个父项的属性，不是全局变量。

你可以按照上面的步骤一步步排查，大概率能找到问题所在。

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