单击 Angular 中的一行时，如何在 Mat Table 中展开多行? [英] How to expand multiple rows in a Mat Table on clicking of a row in Angular?

问题描述

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

I was trying to create a mat-table grid which allows expanding multiple rows on clicking of the rows.

目前我只允许一次展开一行，当我点击第二行时，第一行会折叠起来.是否可以一次展开多行而不折叠其他行?

Currently what I have allows only 1 row to expanded at once, when I click on the second row the first rows gets collapsed. Is it possible to expand multiple rows at a time without collapsing other?

我尝试使用 [多个] 关键字，但没有帮助.

I tried with [multiple] keywords but that didn't help.

用于单行扩展的 StackBlitz 链接

StackBlitz Link for a single row expansion

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

推荐答案

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

One possible way to make multiple rows expanded

从(跟踪单个项目)更改点击处理程序:

change the click handler from (tracking single item):

(click)="expandedElement = row"

跟踪多个

(click)="toggleRow(row)"

TS 部分使用一个简单的数组来添加/删除要扩展的行

TS part using a simple array to add / remove rows to be expanded

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

工作 闪电战

这篇关于单击 Angular 中的一行时，如何在 Mat Table 中展开多行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！