ngFor create 2 rows

Question

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 1

That exists with slightly different syntax:

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

or

<ng-container *ngFor="let element of data let i=index">    <tr>...</tr> //row 1    <tr>...</tr> //row 2 </ng-container> 

update for >= 4.0.0 <template> was changed to <ng-template>

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