ngFor创建2行

Question

使用Angular 2 ngFor我正在创建一个表。

我的问题是my data array包含elements，使得每个元件应在表中创建2个连续行（使用不同的字段，第二行是可折叠的更多的数据）

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

问题是，tbody不允许在<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>改为<ng-template>

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

Answer 2

我面临同样的问题，我没有找到任何好的解决方案。但经过深入研究，我发现这个ng容器，它工作得很好。 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>