Angular中使用*ngFor遍历嵌套数组并正确渲染表格的问题

看起来你遇到的核心问题是数据源的结构是列优先，但表格渲染需要行优先的遍历逻辑，再加上现有代码的表格结构不规范，导致渲染异常。我们一步步来修正：

先分析你的问题 #

你的数据源是：

array = [ ["element A", "element B"], ["YES", "NO"] ];

其中第一个子数组是COLUMN 1的所有值，第二个是COLUMN 2的所有值。但你现有代码的遍历逻辑是把每个子数组当成一行来处理，这完全搞反了，再加上缺少<tr>标签包裹行内容，自然会布局混乱或者显示错误。

修正方案 #

方案1：调整数据源为行优先（推荐） #

如果可以修改数据源的结构，把它转成行优先的格式（每个子数组代表一行的列值）：

// 转换后的行优先数组
rowArray = [ ["element A", "YES"], ["element B", "NO"] ];

然后HTML代码可以这样写，逻辑清晰且符合表格的自然遍历方式：

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>COLUMN 1</th>
      <th>COLUMN 2</th>
    </tr>
  </thead>
  <tbody>
    <!-- 遍历每一行 -->
    <tr *ngFor="let row of rowArray; let i = index">
      <th scope="row">{{ i + 1 }}</th>
      <!-- 遍历当前行的每个列值 -->
      <td *ngFor="let cell of row">{{ cell }}</td>
    </tr>
  </tbody>
</table>

方案2：不修改数据源，按行索引取列值 #

如果不能修改原始的列优先数组，我们可以通过总行数来遍历每一行，再从每个列数组中取出对应索引的元素：

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>COLUMN 1</th>
      <th>COLUMN 2</th>
    </tr>
  </thead>
  <tbody>
    <!-- 总行数取第一个列数组的长度 -->
    <tr *ngFor="let _ of array[0]; let i = index">
      <th scope="row">{{ i + 1 }}</th>
      <!-- 遍历每个列数组，取第i个元素 -->
      <td *ngFor="let column of array">{{ column[i] }}</td>
    </tr>
  </tbody>
</table>

这里用let _ of array[0]来生成对应行数的循环，_表示我们不需要这个循环变量，只需要索引i。

为什么你的原有代码不行？ #

1. 缺少<tr>标签：你的代码里没有用<tr>包裹行内的<th>和<td>，导致表格的DOM结构不符合规范，浏览器无法正确渲染表格布局。
2. 遍历逻辑错误：你把列数组当成了行来遍历，内层循环里取c[0]更是错误的——c已经是单个元素（比如"element A"），c[0]会取到第一个字符'e'，这显然不是你想要的。
3. 过时的<template>标签：Angular现在推荐使用<ng-container>来承载*ngFor指令（如果不需要额外DOM元素的话），不过在这个场景里我们直接用<tr>和<td>就足够了。

内容的提问来源于stack exchange，提问作者Nizar B.