Angular ngFor跨越两行(展开/折叠)

Question

我有一个角色的应用程序.我需要在表格中显示数据列表.我已经在表的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>

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

在组件中,初始化一个名为expandedIndex-1 的变量.这可确保在组件出现时折叠所有行.您可以在构造函数级别执行此操作ngOnInit,但这并不重要:

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

然后,有一个名为的函数expandRow:

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