如何通过单击 Angular 中的一行来展开垫 Table 中的多行？

Question

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

目前我只允许一次展开一行，当我单击第二行时，第一行会折叠。是否可以在不折叠其他行的情况下一次展开多行？

我尝试了[多个]关键字，但没有帮助。

StackBlitz Link 用于单行扩展

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';
  }

工作Stackblitz

如何通过单击 Angular 中的一行来展开垫 Table 中的多行？

How to expand multiple rows in a Mat Table on clicking of a row in Angular?

angular-material

angular