带有可扩展行的 Angular (7+) 材质表 - 同时有多个扩展行答案

【问题标题】：Angular (7+) Material table with expandable rows - multiple expanded rows at the same time带有可扩展行的 Angular (7+) 材质表 - 同时有多个扩展行
【发布时间】：2019-09-23 06:26:37
【问题描述】：

我正在使用Material table with expandable row

我希望在行点击时展开多行。默认行为是在单击新行时关闭先前展开的行。我不希望以前的那些被关闭，每个都应该保持打开状态，直到再次点击。我该怎么做？

【问题讨论】：

标签： angular angular-material angular-material-table

【解决方案1】：

为此，您必须在数据源中再添加一个属性，例如expanded:true，然后在单击行时更改，在数据源中切换此属性，并基于此属性更改 HTML 中的类展开。

Working Demo

添加了代码 sn-p 以防链接中断。

const ELEMENT_DATA: PeriodicElement[] = [
  {
    ...
    expanded: false
  },
  {
    ...
    expanded: false
  }
]

单击该行时，只需切换expanded 属性（不需要循环），还可以基于相同的expanded 属性添加类。

<div class="example-element-detail"
           [@detailExpand]="element.expanded ? 'expanded' : 'collapsed'">
...
</div>

<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
      [class.example-expanded-row]="element.expanded"
      (click)="element.expanded = !element.expanded">
</tr>

【讨论】：

【解决方案2】：

这是另一种方法。

只需将变量设为数组

expandedElement: PeriodicElement[] = [];

在动画部分使用函数而不是直接检查

[@detailExpand]="checkExpanded(element) ? 'expanded' : 'collapsed'"

并且在添加类时使用相同的功能

[class.example-expanded-row]="checkExpanded(element)"

然后单击进行函数调用。如果元素存在，则将其从数组中删除，如果不存在，则添加它

(click)="pushPopElement(element)"

这里是使用的 2 个函数。请随时提高方法的效率。这是一个在短时间内为演示编写的粗略方法。

checkExpanded(element): boolean {
    let flag = false;
    this.expandedElement.forEach(e => {
      if(e === element) {
        flag = true;

      }
    });
    return flag;
  }

  pushPopElement(element) {
    const index = this.expandedElement.indexOf(element);
    console.log(index);
    if(index === -1) {
        this.expandedElement.push(element);
    } else {
      this.expandedElement.splice(index,1);
    }
  }

您可以在此处找到工作示例：https://stackblitz.com/edit/angular-x6jz81

【讨论】：