royB royB - 3 months ago 28
HTML Question

ngFor create 2 rows

Using Angular 2 ngFor I'm creating a table.

My problem is that

my data array
contains
elements
such that each element should create 2 consecutive rows in the table (Using different fields, The second row is collapsible with more data)

<tbody>
<tr *ngFor="let element of data; let i = index">
<th>...<th>
...
<td>...<td>
</tr>
</tbody>


Problem is that
tbody
doesn't allow any attribute beside
<tr>
.

I'm looking for something like

<tbody>
<template *ngFor="let element of data; let i = index">
<tr>...</tr> //row 1
<tr>...</tr> //row 2
</template>
</tbody>

Answer

That exists with slightly different syntax:

<template ngFor let-element [ngForOf]="data" let-i="index">
   <tr>...</tr> //row 1
   <tr>...</tr> //row 2
</template>