[英]Angular *ngFor loop through an array of arrays
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: 我想使用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>
I want to display each inner array list below COLUMN1 and COLUMN2 respectively: 我想分别在COLUMN1和COLUMN2下面显示每个内部数组列表:
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). 我无法弄清楚如何正确使用* ngFor来列出数组数组(简单的字符串列表)。 At the moment, it's either an empty array or a shifted & messed up Table presentation.
目前,它要么是一个空数组,要么是移位并弄乱了Table的演示文稿。
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: 或由于元素A和B的值应低于第1列,而元素YES和NO则应低于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? 如果
csvContent[0]
获得一个新条目,但1没有,该怎么办? Right now, your data doesn't represent a table, and I'd recommend transforming it in your controller to be tabluar, and then printing. 现在,您的数据并不代表表格,我建议您在控制器中将其转换为表格格式,然后进行打印。
Try this: 尝试这个:
<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>
I wasn't sure how your data looked like, but seems like this would help. 我不确定您的数据是什么样子,但是看起来这会有所帮助。 You don't really need to use
<template>
tags (they're deprecated anyway in favor of <ng-template>
tags. 您实际上并不需要使用
<template>
标记(无论如何,它们都已弃用了<ng-template>
标记。
Also, no need for index tracking if you're gonna access the array at that index anyway. 另外,如果您仍然要在该索引处访问数组,则无需进行索引跟踪。
Simply loop like this 像这样简单地循环
<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.