Question

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

我想知道是否有一种方法可以创建一个全部展开按钮，该按钮可以一次扩展每一行，而不必一次单击每一行来进行扩展。

谢谢！

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

看看this stackblitz作为工作示例。