angular - 如何为 Mat-table 创建一个展开所有按钮,以便它在 Angular 8 中展开表格中的每一行?
问题描述
我正在使用 Angular Mat-Table 并创建了一个带有可扩展行的表,就像 Angular 8 中的下图一样:
https://stackblitz.com/angular/qykjaloknex?file=app%2Ftable-expandable-rows-example.ts
我想知道是否有一种方法可以创建一个全部展开按钮,该按钮将一次展开每一行,而不必一次单击每一行来展开它。
谢谢!
解决方案
除了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 以获得一个工作示例。
推荐阅读
- python-3.x - 如何在 Airflow-MacOS 中写入本地文件路径
- c# - 用常用数据类型替换对象类型 - 类型安全
- c# - BindingList vs List - WinForms 数据绑定
- json - 如何使用 RESTinstance 使用 JSON 发出 GET 请求?
- java - java.lang.NullPointerException:尝试在空对象引用上调用虚拟方法“java.lang.String com.example.app.users.getEmail()”
- php - PHP - 获取 PDF 标准、isoname、cmyk 元数据
- python - 尝试将列表附加到数据框,并根据 ID 进行匹配
- kubernetes - Kubernetes liveness probe 日志恢复
- android - 使用二维码应用程序进行库存管理
- html - CSS 属性“box-orient”替换