Angular *ngFor循环遍历一个数组的数组

Question

Angular *ngFor循环遍历一个数组的数组

5

我有一个包含其他数组的数组，就像这样：

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 应该在 COLUMN 1 的下方，YES 和 NO 应该在 COLUMN2 的下方：

- Nizar B.

你的示例没有有效的数组语法。 - Jota.Toledo

@Jota.Toledo 数组完全没有问题，我只是试图展示表格应该是什么样子。现在我添加了一张截图以让它更清晰明了。 - Nizar B.

不，从你的例子中删除1和2，那就可以了。 - Jota.Toledo

@Jota.Toledo 谢谢您的建议，我已经让数组看起来正确了。 - Nizar B.

3个回答

4

试试这个：

<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>标签。

- Amit

我现在更新了，第一列显示索引。 - Amit

我已经添加了第二个截图，以展示您代码片段的结果。正如您所看到的，演示文稿已经出现，但是行并没有在正确的列下面。 - Nizar B.

这样做是不行的，需要将元素A和元素B放在COLUMN1下面，最后将YES和NO放在COLUMN2下方。目前，屏幕截图显示了一个错误示例，它们以行内方式显示。 - Nizar B.

让我们在聊天中继续这个讨论。点击此处进入聊天室。 - Nizar B.

有人能告诉我，在同一个表格中，如果我有一个删除按钮并使用splice来删除一个元素，那么最终我如何获得相应数组的相应元素已被删除的相同结构。 - Hrishikesh Kulkarni

显示剩余3条评论

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>

- Adeeb basheer

我的答案完全正确 - Amit

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rohit · Accepted Answer

您的数据不是数组中的数组，而是两个相连的数组。您需要将其视为这样处理：

   <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没有怎么办？现在，您的数据并不代表一张表格，我建议您在控制器中将其转换成表格形式，然后再打印。