angular - 如何为 Mat-table 创建一个 Expand All Button 以便它在 Angular 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;
}

Have a look at this stackblitz for a working example.