Quiero mostrar los datos de esta matriz:

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

Quiero mostrarlo de esta manera en una tabla:

compositora nom

Composant11 nom1

Composant12 nom1

Composant21 nom2

Composant22 nom2

Este es mi código:

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

Mi navegador no muestra nada. Me pregunto si realmente hay una manera de hacerlo en la plantilla. O si primero debería transformar la matriz en el componente antes de mostrarlo. ¡Cualquier sugerencia será apreciada!

3
edkeveked 19 jun. 2017 a las 16:27

3 respuestas

La mejor respuesta

Prueba esto:

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>
18
Faly 19 jun. 2017 a las 14:13

Cambiar código como a continuación:

    <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>
1
vishal paalakurthi 19 jun. 2017 a las 13:58

Yo uso un poco de una sintaxis diferente que hizo el trabajo

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>
1
Milan 19 jun. 2017 a las 14:21