[英]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来列出数组数组(简单的字符串列表)。 目前,它要么是一个空数组,要么是移位并弄乱了Table的演示文稿。
这是表格的外观:
或由于元素A和B的值应低于第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没有,该怎么办? 现在,您的数据并不代表表格,我建议您在控制器中将其转换为表格格式,然后进行打印。
尝试这个:
<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>
标记。
另外,如果您仍然要在该索引处访问数组,则无需进行索引跟踪。
像这样简单地循环
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.