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

【问题标题】：How to correctly use ngFor in Angular2 web application?如何在 Angular2 Web 应用程序中正确使用 ngFor？
【发布时间】：2017-08-25 18:43:23
【问题描述】：

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

问题是我需要一个有点高级的表。它应该有隐藏的行，在单击行时显示。为此，我使用引导程序 Collapse 来自 https://ng-bootstrap.github.io/#/home 的 angular2。

问题是由于缺乏 HTML 知识，我无法制作我想要的表格。

这段代码 sn-p 循环列表并创建行：

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

【问题讨论】：

您可以将ngFor 放在tr 元素上。这样你只会得到一个包含多个tr 元素的tbody。像这样的东西：<tr *ngFor="let message of messages">
@KajNelissen 这样{{message.text}} 将无法在第二个<tr> 中访问

标签： angular angular-ui-bootstrap

【解决方案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。

【讨论】：