javascript Angular *ngFor 循环遍历数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48150500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular *ngFor loop through an array of arrays
提问by Nizar B.
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). At the moment, it's either an empty array or a shifted & messed up Table presentation.
我无法弄清楚如何正确使用 *ngFor 来列出数组数组（字符串的简单列表）。目前，它要么是一个空数组，要么是一个移位和混乱的表格演示。
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 应该低于第 2 列：
回答by Rohit
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.
这并不是组织数据的好方法，因为内容并不真正相关。如果csvContent[0]得到一个新条目，但 1 没有怎么办？现在，您的数据不代表表格，我建议在您的控制器中将其转换为表格，然后打印。
回答by Amit
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.
此外，如果您无论如何都要访问该索引处的数组，则不需要索引跟踪。
回答by Adeeb basheer
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>
