ngДля создания 2 строк

Использование Angular 2 ngFor Я создаю таблицу.

Моя проблема заключается в том, что my data array содержит такие elements, что каждый элемент должен создавать две последовательные строки в таблице (с использованием разных полей, вторая строка сворачивается с большим количеством данных)

<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>

Ответ 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>

Ответ 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>

Ответ 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>