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