Angular *ngFor 循环遍历数组

Posted 2023-03-05

【中文标题】Angular *ngFor 循环遍历数组

【英文标题】：Angular *ngFor loop through an array of arrays

【发布时间】：2018-06-17 10:39:18

【问题描述】：

我有一个包含其他数组的数组：

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

我想使用 ngFor 循环遍历 html 表中的这个对象数组：

   <table>
     <thead>
       <tr>
         <th>#</th>
         <th>COLUMN 1</th>
         <th>COLUMN 2</th>
       </tr>
     </thead>

     <tbody>
       <template *ngFor="let row of csvContent; let in = index">
         <th scope="row">in</th>
            <template *ngFor="let c of row; let in = index">
              <td>
               c[0]
              </td>
            </template>
       </template>
     </tbody>
  </table>

我想分别在 COLUMN1 和 COLUMN2 下面显示每个内部数组列表：

 COLUMN1   | COLUMN2
 --------------------
 element A | YES
 element B | NO

我不知道如何正确使用 *ngFor 来列出数组数组（简单的字符串列表）。目前，它要么是一个空数组，要么是一个移位和混乱的表格演示文稿。

这是表格的外观：

或者这个错误的展示，因为元素 A 和 B 应该在第 1 列之下，而 YES，NO 应该在第 2 列之下：

【问题讨论】：

您的示例没有有效的数组语法

@Jota.Toledo 该数组非常好，我只是试图表示表格的外观。我现在添加一个屏幕截图以使其清楚。

不，从您的示例中删除 1: 和 2: 就可以了

@Jota.Toledo 感谢您的建议，我现在使数组看起来正确。

【参考方案1】：

您的数据不是数组中的数组；这是两个连接的数组。你需要这样对待它：

   <tbody>
     <tr *ngFor="let column of csvContent[0]; let in = index">
       <td>
         csvContent[0][in]
       </td>
       <td>
         csvContent[1][in]
       </td>
     </tr>
   </tbody>

这并不是一种组织数据的好方法，因为这些东西并不是真正相关的。如果csvContent[0] 得到一个新条目，而 1 没有呢？目前，您的数据不代表表格，我建议您在控制器中将其转换为表格，然后打印。

【讨论】：

你所说的“东西并不真正相关”是什么意思？它是一个简单的数组，其中包含带有多个字符串的其他数组。我相信 *ngFor 有办法显示多维数组。不用担心组织数据，它来自静态 CSV 文件。

@NizarBsb，您的数组不是按行组织的，而是按列组织的。

没错，是不是意味着我需要重新考虑我的数组的结构？

RhoVisions 在这里有唯一正确的答案，令 Adeeb 感到惊讶甚至获得了赞成票。我会重组数组，但 RhoVisions 的答案是完全可以接受的

@lancovivi 我也建议重组，因此是我回答的最后一行。随着时间的推移，颠倒结构关系会引起最少的麻烦。

【参考方案2】：

像这样简单循环

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>COLUMN 1</th>
      <th>COLUMN 2</th>
    </tr>
  </thead>

  <tbody>
    <tr *ngFor="let row of csvContent;let i = index;">
      <td>i</td>
      <td *ngFor="let c of row">c</td>
    </tr>
  </tbody>
</table>

【讨论】：

我的答案完全正确

【参考方案3】：

试试这个：

<table>
     <thead>
       <tr>
         <th>#</th>
         <th>COLUMN 1</th>
         <th>COLUMN 2</th>
       </tr>
     </thead>

     <tbody>
       <tr *ngFor="let row of csvContent;let i = index;">
          <td>i</td>
          <td *ngFor="let c of row">
              c
          </td>
       </tr>
     </tbody>
  </table>

我不确定您的数据是什么样的，但似乎这会有所帮助。 您实际上并不需要使用 <template> 标签（它们已被弃用，取而代之的是 <ng-template> 标签。

此外，如果您要访问该索引处的数组，则无需进行索引跟踪。

【讨论】：

我附上了截图，你的 sn-p 没有正确显示表格，我仍然有同样的问题。

我现在更新了显示索引的第一列

我添加了第二个屏幕截图，向您展示您的 sn-p 的结果。如您所见，演示文稿在那里，但行不在右列下方。

这是行不通的，认为元素 A 和元素 B 需要低于 COLUMN1，最后是，不需要低于 COLUMN2。目前，这显示为错误示例的屏幕截图。

请注意，我在循环中的每个 <tr> 中添加了第一个 <td>i</td>。