如何在其他mat表中实现动态内部数据源的分页

Question

我有一个垫表，它嵌套在其他垫表中。嵌套垫表的数据源是来自第一个垫表的对象数组。

我想为内部数据绑定一个分页来源：[dataSource]="element.users"。我怎样才能到达这里？我一直在SO中搜索，并尝试了几个选项，但都不起作用。有什么想法，如何管理这样的用例？

代码-HTML:

<ng-container *ngFor="let el of adminsList">
<table mat-table [dataSource]="myDataSource" multiTemplateDataRows ...>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>
<div>{{el['version'] }}</div>
</th>
<td mat-cell *matCellDef="let element;">
<table mat-table [dataSource]="element.users">
<ng-container matColumnDef="{{innerColumn}}" *ngFor="let innerColumn of columnsToDisplay">
<th mat-header-cell *matHeaderCellDef>
{{innerColumn }}
</th>
<td mat-cell *matCellDef="let element">
{{element[innerColumn]}}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay"></tr>
</table>
<mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20]"
showFirstLastButtons]="true" #innerPaginator>
</mat-paginator>
</td>
</ng-container>
<ng-container matColumnDef="deployedVersion">
// display: none to hide the outer table column headers
<th mat-header-cell *matHeaderCellDef style="display: none"></th>
<td mat-cell *matCellDef="let element" style="display: none"></td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplay"></tr>
</table>
</ng-container>

代码-TS:

@ViewChild('innerPaginator') innerPaginator: MatPaginator;
innerDataSourceObject: any;
...
...
this.userService.getUserInfo().subscribe((res: userData) => {
...
this.innerDataSourceObject = new MatTableDataSource<EnvComponents>(res);
...
});
...
...
ngAfterViewInit() {
this.innerDataSourceObject.innerPaginator.paginator = this.innerPaginator;
...
}

Answer 1

当dataSource是MatTableDataSource或"独立"；。我想你element.users是一个数组，所以你应该使用as"独立的"；

要作为独立使用，只需在源中使用切片管道即可

当您使用模板ReferenceVariable时；内部寻呼器"；您可以获得innerPaginator.pageIndex(以0开头(和innerPainator.pageSize 的值

您需要将属性长度添加到分页器(您可以在文档中看到示例(

<td mat-cell *matCellDef="let element;">
<table mat-table [dataSource]="element.users
|slice:(innerPaginator.pageIndex*innerPaginator.pageSize)
:((innerPaginator.pageIndex+1)*innerPaginator.pageSize)">
...
</table>
<mat-paginator #innerPaginator [length]="element.users.length"
[pageSize]="5" [pageSizeOptions]="[5, 10, 20]"
showFirstLastButtons]="true">
</mat-paginator>
</td>

你不必担心"；"范围"；因为在*ngFor 内部