Javascript 如果将matTableDataSource放入类似hasmap的结构中，如何进行排序和分页 我们知道在角度上进行排序和分页是容易的（只考虑客户机中的排序）。请参阅：。 但是如何集成多个独立表的排序和分页（这些表的数据结构相同）

据我所知，为了做到这一点，我们需要几个视图子对象（视图子对象的数量等于表的数量）。此外，我们还需要初始化serveralMatTableDataSource对象。我们可以将其放在哈希映射中，如：

{table1Tittle: new MatTableDataSource<Object>(), table2Tittle: new MatTableDataSource<Object>(), ...., };

{table1title:new MatTableDataSource（），table2title:new MatTableDataSource（），…，}；

但问题是我们在得到数据之前不知道表的数量。我们应该如何装饰viewchild，并使viewchild的数量与表的数量相同

{'k1' : [{'id' : '1'}, {'id': '2'} ], 'k2': [{}]} 

将上面的对象转换为数组并指定给表和循环表，如下所示，如果它已经是数组则忽略

您可以在component1中执行类似的操作

     <div *ngFor="let t of tables">
     // app-table is the selector of component2
       <app-table [tablename]="t.k1" [tablesource]="t1.tableArray" > </app-table>        
       </div>

将下面的行复制到类构造函数

@ViewChild(MatPaginator) paginator: MatPaginator;
 @Input() tablename: string;
 @Input() tablesource: any;

复制函数中的行下方

this.dataSource = new MatTableDataSource(this.tablesource);
this.dataSource.paginator = this.paginator;

创建component2.html并编写如下代码

<table mat-table [dataSource] = "dataSource" class = "mat-elevation-z8" > 
        <ng-container matColumnDef = "id">
           <th mat-header-cell *matHeaderCellDef> id</th>
           <td mat-cell *matCellDef = "let element"> {{element.id}} </td>
        </ng-container>
         <ng-container matColumnDef = "id2">
           <th mat-header-cell *matHeaderCellDef> id2</th>
           <td mat-cell *matCellDef = "let element"> {{element.id2}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef = "displayedColumns"></tr>
        <tr mat-row *matRowDef = "let row; columns: displayedColumns;"></tr>
     </table>
     <mat-paginator [pageSizeOptions]="[20, 30, 50]" showFirstLastButtons></mat-paginator>

身份证件
{{element.id}
id2
{{element.id2}}

有一个关键问题：我们不知道在获取数据之前需要生成多少表。所以我们不知道有多少ViewChild和MattableDataSource可以提供帮助？您在一个组件中有多个表，您想用分页方式显示每个表吗？@Raj是的！你说得对。你知道同一个组件中有多少个表吗？

<table mat-table [dataSource] = "dataSource" class = "mat-elevation-z8" > 
        <ng-container matColumnDef = "id">
           <th mat-header-cell *matHeaderCellDef> id</th>
           <td mat-cell *matCellDef = "let element"> {{element.id}} </td>
        </ng-container>
         <ng-container matColumnDef = "id2">
           <th mat-header-cell *matHeaderCellDef> id2</th>
           <td mat-cell *matCellDef = "let element"> {{element.id2}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef = "displayedColumns"></tr>
        <tr mat-row *matRowDef = "let row; columns: displayedColumns;"></tr>
     </table>
     <mat-paginator [pageSizeOptions]="[20, 30, 50]" showFirstLastButtons></mat-paginator>