ngFor 2行を作成する

Question

を使用するAngular 2 ngFor私はテーブルを作成しています。

私の問題はmy data arrayが

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

問題は、tbodyである（第2行は、より多くのデータを用いて折り畳み可能であり、異なるフィールドを使用して）各要素は表2 連続行を作成する必要elementsように含まれていることです<tr>の横の属性は許可されません。

は、私は少し異なる構文で存在する

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

Answer 1

のようなものを探しています：

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

または

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

> = 4.0.0 <template>のアップデートがに変更されました3210

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

Answer 2

私は同じ問題に直面しました。私は良い解決策を見つけることができませんでした。しかし、深いreseach後、私はこの容器を見つけ、それは非常にうまくいった。 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>