ngFür zwei Reihen erstellen

Question

Mit Angular 2 ngFor Ich erstelle eine Tabelle.

Mein Problem ist, dass my data array enthält elements, so dass jedes Element 2 konsekutive Zeilen in der Tabelle erstellen soll (mit unterschiedlichen Bereichen, wobei die zweite Zeile mit mehr Daten zusammenklappbar ist)

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

Problem ist, dass tbody Erlaubt kein Attribut neben <tr>.

Ich suche nach etwas wie

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

Answer 1

, die mit etwas anderen Syntax besteht:

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

oder

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

Update für> = 4.0.0 <template> wurde zugeändert

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

Answer 2

Ich konfrontiert es das gleiche Problem, und ich habe keine gute Lösung gefunden. Aber nach einer gründlichen Suche fand ich diesen ng-Container und es funktionierte sehr gut. U kann es in Aktion unten

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>