如何在Angular2 web應用程序中正確使用ngFor？

Question

所以我有一個我需要在表格中顯示的消息列表。

事情是，我需要一個高級表。它應該有隱藏的行，顯示行被點擊時。爲此，我使用引導程序摺疊，對於的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>來包裝你行，並在該容器中使用*ngFor而不是<tbody>。將您的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。