Angular ngFor 跨越两行（展开/折叠）答案

【问题标题】：Angular ngFor spanning two rows (expand/collapse)Angular ngFor 跨越两行（展开/折叠）
【发布时间】：2017-10-22 10:10:09
【问题描述】：

我有一个角度应用程序。我需要在表格中显示数据列表。我已经在表格的 TR 元素上应用了 ngFor。但是，当展开每一行时，必须显示另一行，其中包含有关该项目的其他详细信息。

折叠视图：

扩展视图：

代码：

<table>
  <thead>
  <tr>Header here</tr>
  </thead>
  
  <tbody>
    <tr *ngFor="let item of results">
      + Collapsed Row
      <!-- How do I display the expanded row and display additional details when + symbol is clicked? -->
    </tr>
    
  </tbody>
</table>

【问题讨论】：

标签： angular html-table expand ngfor

【解决方案1】：

如果您只想要一个简单的展开和折叠行，那么一个简单的ngIf 就可以了：

<tr *ngFor="let item of results">
  <div (click)="item.expanded=!item.expanded">+ Collapsed Row</div>
  <span *ngIf="item.expanded">This is an expanded content</span>
</tr>

但是，如果您希望一次只展开一行，则需要跟踪展开的行。

在您的 html 中：

<tr *ngFor="let item of results; let $index=index;">
  <div (click)="expandRow($index)">+ Collapsed Row</div>
  <span *ngIf="$index === expandedIndex">This is an expanded content</span>
</tr>

在您的组件中，使用 -1 的值初始化一个名为 expandedIndex 的变量。这确保了在组件初始化时所有行都被折叠。您可以在构造函数级别或ngOnInit 执行此操作，这并不重要：

constructor(public expandedIndex:number){
   this.expandedIndex=-1;
}

然后，有一个名为 expandRow 的命名函数：

  expandRow(index: number): void {
    this.expandedIndex = index === this.expandedIndex ? -1 : index;
  }

【讨论】：

这不起作用。 Div 和 Span 确实在 TR 中呈现，但表格结构丢失了。我基本上需要两个 TR（重复），其中一个根据条件可见/隐藏。在这些 TR 中，我需要 TD。
不，你不能。您不能将两个tr 重复两次，然后根据单个重复实例的条件隐藏和显示。要么你改变你的 css（如果这是你关心的话），或者你将不得不动态改变单个 tr 中的内容
这会很棒。如果<tr> 可以有<div> 或<span> 作为直接子级......

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