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

Answer 1

I faced it the same problem and i didn't find any good solution. But after a deep reseach i found this ng-container and it worked very well. U can see it in action bellow

https://plnkr.co/edit/F8ohXKLHvvbHXAqGESQN?p=preview

 <ng-container *ngFor="let obj of posts">
        <tr>
            <td>
                <button (click)="openCloseRow(obj.id)">
                    <span *ngIf="rowSelected!=obj.id; else close">Open</span>
                      <ng-template #close>
                        <span>Close</span>
                        </ng-template>
                </button>
            </td> 
          <td>{{obj.date}}</td>
          <td>
              {{obj.subject}}
          </td>
          <td>{{obj.numComents}}</td>
        </tr>
        <tr *ngIf="rowSelected==obj.id">
            <td></td>
            <td colspan="4">
                <table class="table table-striped">
                    <thead>
                        <tr>                                   
                            <th style="width:15%;">Comment</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let q of obj.comments">                                  
                            <td style="width:15%;">{{q}}</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
      </ng-container>

Answer 2

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>