Angular * ngFor循环遍历数组

时间:2018-01-08 12:39:20

标签: javascript arrays angular html-table ngfor

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

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以列出数组数组(简单的字符串列表)。目前,它是一个空阵列或一个移位的&amp;弄乱了表格。

这就是表格的看法:

shifted HTML Table using *ngFor

或者这个错误的演示文稿因为元素A和B应该低于第1列并且是,否则应该低于COLUMN2:

enter image description here

3 个答案:

答案 0 :(得分:4)

您的数据不是数组中的数组;它是两个连接的阵列。你需要这样对待它:

   <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没有,该怎么办?现在,您的数据不代表表格,我建议您将其在控制器中转换为tabluar,然后打印。

答案 1 :(得分: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>

我不确定您的数据是什么样的,但似乎这会有所帮助。 您实际上并不需要使用<template>标记(它们已被弃用,无论如何都支持<ng-template>标记。

此外,如果你要在那个索引上访问数组,也不需要索引跟踪。

答案 2 :(得分:1)

像这样循环

<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>