ngFor 创建 2 行

Posted 2023-03-05

【中文标题】ngFor 创建 2 行

【英文标题】：ngFor create 2 rows

【发布时间】：2016-12-30 01:34:23

【问题描述】：

使用Angular 2 ngFor 我正在创建一个表。

我的问题是my data array 包含elements 这样每个元素应该在表中创建2 连续 行（使用不同的字段，第二行可折叠更多数据）

<tbody>
    <tr *ngFor="let element of data; let i = index">
       <th>...<th>
       ...
       <td>...<td>
    </tr>
</tbody>

问题是tbody 不允许除<tr> 之外的任何属性。

我正在寻找类似的东西

<tbody>
   <template *ngFor="let element of data; let i = index">
       <tr>...</tr> //row 1
       <tr>...</tr> //row 2
   </template>
</tbody>

【参考方案1】：

语法略有不同：

<template ngFor let-element [ngForOf]="data" let-i="index">
   <tr>...</tr> //row 1
   <tr>...</tr> //row 2
</template>

或

<ng-container *ngFor="let element of data let i=index">
   <tr>...</tr> //row 1
   <tr>...</tr> //row 2
</ng-container>

>= 4.0.0 <template> 的更新已更改为 <ng-template>

<ng-template ngFor let-element [ngForOf]="data" let-i="index">
   <tr>...</tr> //row 1
   <tr>...</tr> //row 2
</ng-template>

【讨论】：

谢谢。不明白为什么语法不同。我确实在文档中看到了 ithis 语法，并使用 *ngFor 进行了尝试，但它不起作用（错字）。此外，我的 IDE 抱怨这种语法在这里“不允许”并且没有自动完成功能。

angular.io/docs/ts/latest/guide/… 我不了解 IDE。我在回答中展示的是规范语法。 *ngFor 是语法糖。

几天前我需要这个，但我通过 bootstrap 3 row 和 col-xx-y 类实现了它。第二行由第一行激活，它将充当向下钻取表。基本上，我试图避免在整个项目中将 *ngFor “分解”为各种方法，并希望在每个视图中保持统一。

@HuseinRoncevic 你能分享一些代码吗？如果它与引导程序 4 相关，则更是如此。

超级有帮助！完美运行。

【参考方案2】：

我遇到了同样的问题，但没有找到任何好的解决方案。但经过深入研究后，我发现了这个 ng-container，它运行良好。你可以在下面看到它的行动

https://plnkr.co/edit/F8ohXKLHvvbHXAqGESQN?p=preview

 <ng-container *ngFor="let obj of posts">
        <tr>
            <td>
                <button (click)="openCloseRow(obj.id)">
                    <span *ngIf="rowSelected!=obj.id; else close">Open</span>
                      <ng-template #close>
                        <span>Close</span>
                        </ng-template>
                </button>
            </td> 
          <td>obj.date</td>
          <td>
              obj.subject
          </td>
          <td>obj.numComents</td>
        </tr>
        <tr *ngIf="rowSelected==obj.id">
            <td></td>
            <td colspan="4">
                <table class="table table-striped">
                    <thead>
                        <tr>                                   
                            <th style="width:15%;">Comment</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let q of obj.comments">                                  
                            <td style="width:15%;">q</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
      </ng-container>

【讨论】：

ng-container 将在表格主体内添加 html 中不允许的元素。演示无法正常工作。

plunker 可能无法正常工作，但使用 ng-container 可以正常工作。表中没有工件。