如何将两段Angular *ngFor循环渲染内容置于不同列中？

嘿，这个需求很清晰，我给你两种常见的实现方式，你可以根据实际场景选择：

场景1：两列分别展示两个数组的全部元素 #

如果希望左边整列显示check数组的所有内容，右边整列显示check2数组的所有内容，可以把两个数组的循环放在同一个<tr>的不同<td>里，用内部容器（比如<div>）来承载每个元素：

<tbody>
  <tr>
    <!-- 第一列：展示check数组的所有元素 -->
    <td>
      <div *ngFor="let person of check">{{ person }}</div>
    </td>
    <!-- 第二列：展示check2数组的所有元素 -->
    <td>
      <div *ngFor="let person of check2">{{ person }}</div>
    </td>
  </tr>
</tbody>

这样渲染后，表格会有一行两列，左列是check的所有项，右列是check2的所有项。如果需要列内元素垂直对齐，还可以给<td>加一些CSS样式调整。

场景2：每行对应两个数组的同位置元素（数组长度相同） #

如果check和check2数组长度一致，想要每行展示一对对应位置的元素（比如第一行左列是check[0]，右列是check2[0]），可以用*ngFor的索引变量来实现：

<tbody>
  <tr *ngFor="let person of check; let i = index">
    <td>{{ person }}</td>
    <td>{{ check2[i] || '' }}</td>
  </tr>
</tbody>

这种方式会生成和数组长度相同的行数，每行包含两列，分别对应两个数组的同索引元素。代码里的|| ''是为了避免数组长度不一致时出现空值报错，你可以根据需求调整。

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