Angular2 WebアプリケーションでngForを正しく使用する方法は？

Question

私はテーブルに表示する必要があるメッセージのリストを持っています。

私は少し高度なテーブルが必要です。行がクリックされたときを示す非表示の行が必要です。そのために私はブートストラップを使用しています.https://ng-bootstrap.github.io/#/homeからangular2のためにを折りたたんでいます。

問題は、HTMLの知識が不足しているため、私が望むテーブルを作ることができないということです。

このコードスニペットは、リストをループし、行を作成します。メッセージがあるよう

<tbody *ngFor="let message of messages | paginate: config"> 
    <tr> 
     <td [class.unseen]="!message.seen" [class.seen]="message.seen">{{message.title}}</td> 
     <td [class.unseen]="!message.seen" [class.seen]="message.seen">{{message.created | date:'longDate'}}</td> 
     <td class="details-button" (click)="message.collapsed = !message.collapsed; makeMessageSeen(message);" [attr.aria-expanded]="!message.collapsed" aria-controls="collapseExample">{{message.collapsed ? 'More' : 'Less'}}</td> 
     <td></td> 
    </tr> 
    <tr id="collapseExample" [ngbCollapse]="message.collapsed"> 
     <td>{{message.text}}</td> 
     <td colspan="3"></td> 
    </tr> 
</tbody> 

今のコードでは、できるだけ多くのtbody要素を作成します。

<tbody> 
    <tr> --title1 
    <tr> --hidden1 
</tbody> 
<tbody> 
    <tr> --title2 
    <tr> --hidden2 
</tbody> ..... 

は、唯一のTBODY要素を作成する方法はあります内部に多くのtr要素があるので、これは次のようになります... ???

<tbody> 
    <tr> --title1 
    <tr> --hidden1 
    <tr> --title2 
    <tr> --hidden2 
    <tr> --title3 
    <tr> --hidden3 
</tbody> 

Answer 1

使用<ng-container>あなたの行をラップし、代わりに<tbody>の容器に*ngForを使用します。あなたのhtmlを次のように変更してください：

<tbody> 
    <ng-container *ngFor="let message of messages | paginate: config"> 
     <tr> 
      <td [class.unseen]="!message.seen" [class.seen]="message.seen">{{message.title}}</td> 
      <td [class.unseen]="!message.seen" [class.seen]="message.seen">{{message.created | date:'longDate'}}</td> 
      <td class="details-button" (click)="message.collapsed = !message.collapsed; makeMessageSeen(message);" [attr.aria-expanded]="!message.collapsed" aria-controls="collapseExample">{{message.collapsed ? 'More' : 'Less'}}</td> 
      <td></td> 
     </tr> 
     <tr id="collapseExample" [ngbCollapse]="message.collapsed"> 
      <td>{{message.text}}</td> 
      <td colspan="3"></td> 
     </tr> 
    </ng-container> 
</tbody> 

このPlunker Demoを参照してください。