Angular 2中的嵌套循环

Question

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

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

我希望在表格中以这种方式显示它：

组件名称

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

我的浏览器没有显示任何内容。我想知道在模板中是否有一种方法可以做到这一点。或者我应该先在组件中转换数组，然后再显示它。 任何建议都将不胜感激！

- edkeveked

---

只有一个问题...你的数组是公共的还是私有的？..你能否也发布你的ts代码？ - federico scamuzzi

数组是公共的。 - edkeveked

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>

- Faly

---

@Fali：这将打印array的输出。但是，正如我在问题中提到的那样，我希望显示在表格内。 - edkeveked

Answer 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>{{item.nom}}</td> <td>{{composant|json}}</td> 
</tr>
</template> 
</template> 
</table>

- vishal paalakurthi

---

它没有任何区别。 - edkeveked

这很重要，因为项目包括名称和组件，但组件不包括名称。 - vishal paalakurthi

Answer 3

我使用了一个略有不同的语法，但达到了预期效果。

http://plnkr.co/edit/Z94BxYiu2UTU7h3oySui?p=preview

<table>
<tr>
<th>Composant</th>
<th>Nom</th>
</tr>
<template ngFor #item [ngForOf]="array">
  <template ngFor #noo [ngForOf]="item.composants">
    <tr>
      <td>{{noo}}</td>
      <td>{{item.nom}}</td>
    </tr>
    </template>
</template>
</table>

- Milan