如何在 Angular2 Web 应用程序中正确使用 ngFor？

Question

所以我有一个消息列表，我需要在 table 中显示。

问题是我需要一点高级 table。它应该有隐藏的行，在单击行时显示。为此，我使用 bootstrap Collapse for angular2 from https://ng-bootstrap.github.io/#/home .

问题是由于HTML方面的知识不足，我做不到我想要的table。

此代码片段循环列表并创建行：

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

如何在 Angular2 Web 应用程序中正确使用 ngFor？

How to correctly use ngFor in Angular2 web application?

angular-ui-bootstrap

angular