如何为Mat-table创建一个“全部展开”按钮，使其以8角展开表格中的每一行？

Question

我正在使用Angular Mat-Table,并创建了一个具有可扩展行的表,就像Angular 8中下面的表：

https://stackblitz.com/angular/qykjaloknex?file=app%2ftable-expandable-rows-example.ts

我想知道是否有一种方法，我可以创建一个扩展所有按钮，它将一次扩展每一行，而不是一次点击每一行来扩展它。

谢谢！

Answer 1

您可以在expandedelement之外引入一个可以切换的属性（例如，通过一个按钮）来实现这一点。

在模板中添加按钮以切换“全部展开/折叠”：

<button mat-raised-button (click)="toggle()">{{allRowsExpanded ? 'Collapse' : 'Expand'}}</button>

更改要展开的行的条件：

<div class="example-element-detail"
           [@detailExpand]="(element == expandedElement || allRowsExpanded) ? 'expanded' : 'collapsed'">

并将其连接到组件中：

allRowsExpanded: boolean = false;

public toggle() {
  this.allRowsExpanded = !this.allRowsExpanded;
  this.expandedElement = null;
}

看看这个stackblitz的工作示例。