angular - Angular 2 中的嵌套循环

Question

我想显示这个数组的数据:

array = [
{nom: nom1, composants: [composant11, composant12]}, 
{nom: nom2, composants: [composant21, composant22]}
]

我想在表格中这样显示:

成分 名称

Composer 11 名 1

组合物 12 名称 1

合成物 21 名称 2

合成物 22 名称 2

这是我的代码:

<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>

我的浏览器没有显示任何内容。我想知道是否真的有办法在模板中做到这一点。或者我是否应该在显示之前先转换组件中的数组。 任何建议将不胜感激!

Answer 1

试试这个:

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>