我有一个数组,其中包含其他数组,如下所示:
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 下方:
你的数据不是数组中的数组;这是两个连接的数组。您需要这样对待它:
<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 没有?现在,您的数据并不代表表格,我建议您在控制器中将其转换为表格,然后打印。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)