ngFor 2 satır oluştur

Question

Angular 2 ngFor Kullanarak bir tablo oluyorum.

Benim sorun my data array

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

sorun bu tbody olan (ikinci sıra daha fazla veri katlanabilir, farklı alanları kullanarak), her bir eleman tabloda 2 ardışık satır oluşturmalıdır elements şekilde içermesidir <tr>'un yanındaki herhangi bir özelliğe izin vermez.

Ben biraz farklı sözdizimi ile var

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

Answer 1

gibi bir şey arıyorum:

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

veya

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

güncelleme> = 4.0.0 <template> içinolarak değiştirildi

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

Answer 2

Aynı sorunla karşılaştım ve iyi bir çözüm bulamadım. Ama derin bir araştırmadan sonra bu ng-kabı buldum ve çok iyi çalıştı. U

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 3

<table> 
     <tr> 
      <th>ID#</th> 
      <th>Name</th> 
      <th>Grade</th> 
      <th>Power</th> 
     </tr> 
     <tr *ngFor="let object_name of object_array"> 
      <td>{{object_name.id}}</td> 
      <td>{{object_name.name}}</td> 
      <td>{{object_name.grade}}</td> 
      <td>{{object_name.power}}</td> 
     </tr> 
</table>