如何解决在 Angular 中扩展嵌套垫表中的多行不起作用
我使用 Angular material 创建了一个嵌套的 mat-table 网格。但目前一次只能扩展 1 行。我想添加一项功能,以便可以一次展开多行,而不会折叠前一行。
嵌套表的工作 Stackblitz 链接 - https://stackblitz.com/edit/angular-nested-mat-table
尝试将元素推送到 ExpandedElement 数组,但效果不佳 -
const index = this.expandedElements.findIndex(x => x.name == row.name);
if (index === -1) {
this.expandedElements.push(row);
} else {
this.expandedElements.splice(index,1);
谁能帮助我如何在此添加多行扩展?
解决方法
展开/折叠逻辑与 How to expand multiple rows in a Mat Table on clicking of a row in Angular? 的答案非常相似。
概念 (TL;DR)
-
toggleElement
函数用于将element
添加到expandedElement
。 -
isExpanded
函数用于检查element
是否存在于expandedElement
。 - 使用
isExpanded
显示元素(展开/折叠)。
解决方案
上一个
<div class="example-element-detail" *ngIf="element.addresses?.data.length" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<div class="inner-table mat-elevation-z8" *ngIf="expandedElement">
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;" [class.example-element-row]="element.addresses?.data.length"
[class.example-expanded-row]="expandedElement === element" (click)="toggleRow(element)">
</tr>
由于在element
中加入了expandedElements
表示展开,所以需要用expandedElements
isExpanded(element)中/strong>。
最新
<div class="example-element-detail" *ngIf="element.addresses?.data.length" [@detailExpand]="isExpanded(element)">
<div class="inner-table mat-elevation-z8" *ngIf="isExpanded(element)">
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;" [class.example-element-row]="element.addresses?.data.length"
[class.example-expanded-row]="isExpanded(element)" (click)="toggleRow(element)">
</tr>
.component.ts
export class TableExpandableRowsExample {
...
expandedElements: any[] = [];
...
toggleRow(element: User) {
element.addresses && (element.addresses as MatTableDataSource<Address>).data.length
? this.toggleElement(element)
: null;
this.cd.detectChanges();
this.innerTables.forEach((table,index) => (table.dataSource as MatTableDataSource<Address>).sort = this.innerSort.toArray()[index]);
}
isExpanded(row: User): string {
const index = this.expandedElements.findIndex(x => x.name == row.name);
if (index !== -1) {
return 'expanded';
}
return 'collapsed';
}
toggleElement(row: User){
const index = this.expandedElements.findIndex(x => x.name == row.name);
if (index === -1) {
this.expandedElements.push(row);
} else {
this.expandedElements.splice(index,1);
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。