Question

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

问题是我需要一点高级表。它应该有隐藏的行，显示单击行的时间。为此我从https://ng-bootstrap.github.io/#/home使用bootstrap 折叠 for 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> .....

有没有办法只创建一个内部有多个tr元素的tbody元素，所以它看起来像这样...... ???

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

1 个答案: