Nested loops in angular 2

Question

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

composant12 nom1

composant21 nom2

composant22 nom2

This is my code:

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

just one question ...is your array a public? or private?.. can youpost also your ts code? — federico scamuzzi
– federico scamuzzi, Commented Jun 19, 2017 at 13:49

Faly · Accepted Answer · 2017-06-19 14:13:20Z

23

Try this:

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>

edited Jun 19, 2017 at 14:13

answered Jun 19, 2017 at 13:54

Faly

13.4k2 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

edkeveked Over a year ago

@Fali: this will print the output of array. But I want the display to be inside a table, as I mentionned in my question.

vishal paalakurthi · Accepted Answer · 2017-06-19 13:58:25Z

2

Change code like below:

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

answered Jun 19, 2017 at 13:58

vishal paalakurthi

1381 silver badge9 bronze badges

2 Comments

edkeveked Over a year ago

It doesn't make any difference

vishal paalakurthi Over a year ago

It makes difference ,because item include nom and composants but composant doesn't include nom..

Milan · Accepted Answer · 2017-06-19 14:21:52Z

1

I use a bit of a different syntax that got the job done

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>

answered Jun 19, 2017 at 14:21

Milan

1362 silver badges12 bronze badges

Collectives™ on Stack Overflow

Nested loops in angular 2

3 Answers 3

1 Comment

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Linked

Related