在Angular中的嵌套垫表中扩展多行不起作用答案

【问题标题】：Expanding multiple rows in a nested mat table in Angular not working在Angular中的嵌套垫表中扩展多行不起作用
【发布时间】：2021-09-06 15:44:33
【问题描述】：

我使用 Angular Material 创建了一个嵌套的垫表网格。但目前一次只能扩展 1 行。我想添加一项功能，以便一次展开多行，而不会折叠前一行。

嵌套表的工作 Stackblitz 链接 - https://stackblitz.com/edit/angular-nested-mat-table

尝试将元素推送到 ExpandedElement 数组，但效果不大 -

const index = this.expandedElements.findIndex(x => x.name == row.name);
if (index === -1) {
  this.expandedElements.push(row);
} else {
  this.expandedElements.splice(index, 1);
}

谁能帮我了解如何在此添加多行扩展？

【问题讨论】：

标签： angular typescript angular-material mat-table angular-material-table

【解决方案1】：

展开/折叠逻辑与How to expand multiple rows in a Mat Table on clicking of a row in Angular? 的答案非常相似。

概念 (TL;DR)

toggleElement 函数将element 添加到expandedElement。
isExpanded 函数检查element 是否存在于expandedElement。
使用isExpanded 显示元素（展开/折叠）。

解决方案

上一个

<div class="example-element-detail" *ngIf="element.addresses?.data.length" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
  <div class="inner-table mat-elevation-z8" *ngIf="expandedElement">

<tr mat-row *matRowDef="let element; columns: columnsToDisplay;" [class.example-element-row]="element.addresses?.data.length"
     [class.example-expanded-row]="expandedElement === element" (click)="toggleRow(element)">
</tr>

由于element被添加到expandedElements中表示它被扩展了，所以你需要用isExpanded(element)检查该元素是否在expandedElements中。

最新

<div class="example-element-detail" *ngIf="element.addresses?.data.length" [@detailExpand]="isExpanded(element)">
  <div class="inner-table mat-elevation-z8" *ngIf="isExpanded(element)">

<tr mat-row *matRowDef="let element; columns: columnsToDisplay;" [class.example-element-row]="element.addresses?.data.length"
     [class.example-expanded-row]="isExpanded(element)" (click)="toggleRow(element)">
</tr>

.component.ts

export class TableExpandableRowsExample {

  ...

  expandedElements: any[] = [];

  ...

  toggleRow(element: User) {
    element.addresses && (element.addresses as MatTableDataSource<Address>).data.length 
      ? this.toggleElement(element) 
      : null;
    this.cd.detectChanges();
    this.innerTables.forEach((table, index) => (table.dataSource as MatTableDataSource<Address>).sort = this.innerSort.toArray()[index]);
  }

  isExpanded(row: User): string {
    const index = this.expandedElements.findIndex(x => x.name == row.name);
    if (index !== -1) {
      return 'expanded';
    }
    return 'collapsed';
  }

  toggleElement(row: User){
    const index = this.expandedElements.findIndex(x => x.name == row.name);
    if (index === -1) {
      this.expandedElements.push(row);
    } else {
      this.expandedElements.splice(index, 1);
    }
  }
}

Sample Solution on StackBlitz

【讨论】：

是否可以在地址网格内创建第三个网格？ @yong