角* ngFor遍历数组数组 [英] Angular *ngFor loop through an array of arrays

问题描述

我有一个数组，其中包含其他数组，像这样:

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来列出数组数组(简单的字符串列表).目前，它要么是一个空数组，要么是移位的&弄乱了表的显示.

这是表格的外观:

转换了HTML表

或者由于元素A和B应该在第1列以下并且是，否应该在COLUMN2以下，所以出现这种错误的显示方式:

解决方案

您的数据不是数组中的数组；这是两个相连的阵列.您需要这样对待它:

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

I have an array which contains other arrays inside like that:

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

And I want to loop through this array of object in an HTML table using ngFor:

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

I want to display each inner array list below COLUMN1 and COLUMN2 respectively:

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

I can't figure it out how to use *ngFor properly in order to list an array of arrays (Simple list of strings). At the moment, it's either an empty array or a shifted & messed up Table presentation.

This is how looks the Table:

Or this wrong presentation because Element A and B should be below COLUMN 1 and YES, NO should be below COLUMN2:

解决方案

Your data is not arrays in arrays; it's two connected arrays. You need to treat it as such:

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

This is not really a good way of organizing your data, as stuff is not really related. What if csvContent[0] gets a new entry, but 1 doesn't? Right now, your data doesn't represent a table, and I'd recommend transforming it in your controller to be tabluar, and then printing.

这篇关于角* ngFor遍历数组数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！