如何在点击角度上的一行时，在Mat表中展开多行？

Question

我试图创建一个mat-table网格，它允许在单击行时展开多个行。

目前，我只允许一行一次展开，当我单击第二行时，第一行将被折叠。是否可以一次展开多个行而不折叠其他行？

我试过使用多个关键字，但这没有帮助。

用于单行展开的StackBlitz链接

• https://stackblitz.com/edit/angular-material-expandable-table-rows

Answer 1

一种使多行展开的可能方法

更改单击处理程序(跟踪单个项)：

(click)="expandedElement = row"

跟踪倍数

(click)="toggleRow(row)"

使用简单数组添加/删除要展开的行的TS部件

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

下一次修改如下：

[@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"

对此：

[@detailExpand]="isExpanded(row)"

TS部分

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

工作斯塔克布利茨