角度2中的嵌套循环 [英] Nested loops in angular 2
本文介绍了角度2中的嵌套循环的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我要显示此数组的数据:
I want to display the data of this array:
array = [
{nom: nom1, composants: [composant11, composant12]},
{nom: nom2, composants: [composant21, composant22]}
]
我想以这种方式在表格中显示它:
I want to display it this way in a table:
composant nom
composant11 nom1
composant11 nom1
composant12 nom1
composant12 nom1
composant21 nom2
composant21 nom2
composant22 nom2
composant22 nom2
这是我的代码:
<table>
<tr>
<th>Composant</th>
<th>Nom</th>
</tr>
<template *ngFor="let item of array">
<template *ngFor="let composant of item.composants">
<tr>
<td>{{composant.nom}}</td>
<td>{{composant.code}}</td>
</tr>
</template>
</template>
</table>
我的浏览器未显示任何内容.我想知道模板中是否真的有办法做到这一点.或者,如果我应该先在组件中转换数组,然后再显示它. 任何建议将不胜感激!
My browser is not showing anything. I wonder if really there is a way to do that in the template. Or if I should first transform the array in the component before displaying it. Any suggestion will be appreciated!
推荐答案
尝试一下:
rows = [
{nom: "nom1", composants: ["composant11", "composant12"]},
{nom: "nom2", composants: ["composant21", "composant22"]}
];
<table>
<ng-container *ngFor="let row of rows">
<tr *ngFor="let composant of row.composants">
<td> {{ composant }} </td>
<td> {{ row.nom }} </td>
</tr>
<ng-container>
</table>
这篇关于角度2中的嵌套循环的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文