javascript - Angular *ngFor 循环遍历数组的数组

Question

我有一个数组，其中包含其他数组，如下所示:

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 下方:

Answer 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 没有，该怎么办？现在，您的数据并不代表表格，我建议您在 Controller 中将其转换为表格，然后打印。