![](/img/trans.png)
[英]How to add arrow icons to expand and collapse any row in Angular Mat-Table with Expandable Rows?
[英]How to create a nested mat-table in a table with expandable rows using angular material
我有以下数据
[
{
"_id": "c9d5ab1a",
"subdomain": "wing",
"domain": "aircraft",
"part_id": "c9d5ab1a",
"info.mimetype": "application/json",
"info.dependent": "parent",
"nested": [
{
"domain": "aircraft",
"_id": "c1859902",
"info.mimetype": "image/jpeg",
"info.dependent": "c9d5ab1a",
"part_id": "c1859902",
"subdomain": "tail"
}
]
},
{
"_id": "1b0b0a26",
"subdomain": "fuel",
"domain": "aircraft",
"part_id": "1b0b0a26",
"info.mimetype": "image/jpeg",
"info.dependent": "no_parent"
}
]
这里如果"info.dependent": "parent"
那么它是嵌套的,如果"info.dependent": "no_parent"
那么它没有孩子。 我试图创建一个动态表,但我被困在如何使用嵌套表使其可折叠/可扩展。 这是我在stackblitz 上的代码。
<mat-table class=" mat-elevation-z8" [dataSource]="dataSource">
<ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns">
<mat-header-cell *matHeaderCellDef> {{ col }} </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element[col] }} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row;columns:displayedColumns"></mat-row>
</mat-table>
.ts
public data = [
{
"_id": "c9d5ab1a",
"subdomain": "wing",
"domain": "aircraft",
"part_id": "c9d5ab1a",
"info.mimetype": "application/json",
"info.dependent": "parent",
"nested": [
{
"domain": "aircraft",
"_id": "c1859902",
"info.mimetype": "image/jpeg",
"info.dependent": "c9d5ab1a",
"part_id": "c1859902",
"subdomain": "tail"
}
]
},
{
"_id": "1b0b0a26",
"subdomain": "fuel",
"domain": "aircraft",
"part_id": "1b0b0a26",
"info.mimetype": "image/jpeg",
"info.dependent": "no_parent"
}
];
dataSource = new MatTableDataSource([]);
displayedColumns = ['_id', 'subdomain', 'domain', 'part_id', 'info.mimetype', 'info.dependent'];
constructor(){
this.displayedColumns = this.displayedColumns;
this.dataSource = new MatTableDataSource(this.data);
}
嵌套格式如下
第 1 行 --> _id ,subdomain,domain,info.dependent
当我们单击该特定行时,它必须展开并在带有列名和行数据的表中显示嵌套数据。
"nested": [
{
"domain": "aircraft",
"_id": "c1859902",
"info.mimetype": "image/jpeg",
"info.dependent": "c9d5ab1a",
"part_id": "c1859902",
"subdomain": "tail"
}
]
注意:对于那些想跳过冗长解释的人,这里是StackBlitz 示例。
您真正想要的是创建一个嵌套的mat-table
,其中所有嵌套的表都是可排序的,也可以过滤。
首先,由于您需要在嵌套表中使用过滤和排序,您需要为其创建一个新的MatTableDataSource
。 这可以在您在ngOnInit
创建主dataSource
时最初完成,如下所示。
usersData: User[] = [];
USERS.forEach(user => {
if (user.addresses && Array.isArray(user.addresses) && user.addresses.length) {
this.usersData = [...this.usersData, { ...user, addresses: new MatTableDataSource(user.addresses) }];
} else {
this.usersData = [...this.usersData, user];
}
});
this.dataSource = new MatTableDataSource(this.usersData);
从文档中的可扩展行示例中,我们可以看到如何创建可扩展行。 在可扩展行中,我们现在将有一个表格以及Filter
输入。 我们将添加一些条件,以便仅当存在addresses
该行才可扩展。
<div class="example-element-detail" *ngIf="element.addresses?.data.length"
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<div class="inner-table mat-elevation-z8" *ngIf="expandedElement">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<table #innerTables mat-table #innerSort="matSort" [dataSource]="element.addresses" matSort>
<ng-container matColumnDef="{{innerColumn}}" *ngFor="let innerColumn of innerDisplayedColumns">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{innerColumn}} </th>
<td mat-cell *matCellDef="let element"> {{element[innerColumn]}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="innerDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: innerDisplayedColumns;"></tr>
</table>
</div>
</div>
现在只有当有嵌套元素时行才会扩展,我们需要为没有addresses
的用户摆脱悬停
这是负责在悬停时添加background-color
的 CSS
tr.example-element-row:not(.example-expanded-row):hover {
background: #777;
}
因此,如果行有一个address
我们只需要将example-element-row
类添加到我们的行中。 如果它没有地址,则该行不应该是可点击的,并且不应该有一个悬停来向用户表明该行实际上是不可点击的。
<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>
在toggleRow
,我们将定义当您单击模板中的一行时会发生什么的逻辑。 我们还将在用户单击此函数中的行时实现sort
。
@ViewChildren('innerSort') innerSort: QueryList<MatSort>;
toggleRow(element: User) {
element.addresses && (element.addresses as MatTableDataSource<Address>).data.length ? (this.expandedElement = this.expandedElement === element ? null : element) : null;
this.cd.detectChanges();
this.innerTables.forEach((table, index) => (table.dataSource as MatTableDataSource<Address>).sort = this.innerSort.toArray()[index]);
}
最后,我们需要定义applyFilter
函数,以便可以过滤嵌套表。
@ViewChildren('innerTables') innerTables: QueryList<MatTable<Address>>;
applyFilter(filterValue: string) {
this.innerTables.forEach((table, index) => (table.dataSource as MatTableDataSource<Address>).filter = filterValue.trim().toLowerCase());
}
这是StackBlitz上的一个工作示例。
<mat-table>
中缺少multiTemplateDataRows
指令@detailExpand
触发器这是文档中包含您的数据的示例
编辑(关于评论)
以下是获取动态列的方法:
将此添加到您的组件中
getKeys(object): string[] {
return Object.keys(object);
}
使用模板中的方法(根据附加的详细信息屏幕和nested
键下的多个元素的注释更新模板):
<div class="example-element-descriptions">
<div *ngFor="let nested of element['nested']"
class="example-element-description">
<div *ngIf="element['info.dependent'] === 'parent'">
<div class="example-element-description__header">
<div class="example-element-description__cell"
*ngFor="let key of getKeys(nested)">{{key}}</div>
</div>
<div class="example-element-description__content">
<div class="example-element-description__cell"
*ngFor="let key of getKeys(nested)">{{element[key]}}
</div>
</div>
</div>
<div *ngIf="element['info.dependent'] === 'no_parent'">no parent</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.