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>

更新＆gt; = 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

我遇到了同样的问题，我没有找到任何好的解决方案。但经过深入研究后，我发现了这个容器并且效果很好。你可以在行动中看到它

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>

ngFor创建2行

3 个答案: