我有一个包含其他数组的数组:
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;弄乱了表格。
这就是表格的看法:
或者这个错误的演示文稿因为元素A和B应该低于第1列并且是,否则应该低于COLUMN2:
答案 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>