如何为 Mat-table 创建一个"全部展开"按钮，以便它扩展 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;
}

看看这个堆栈闪电战作为一个工作示例。