javascript - 如果将 matTableDataSource 放入类似 angular 的 hashmap 结构中，如何进行排序和分页

Question

我们知道在 angular 中进行排序和分页很容易(仅考虑在客户端进行排序)。引用:https://stackblitz.com/angular/dnblbyvggqyj?file=src%2Fapp%2Ftable-sorting-example.ts .
但是如何集成几个单独的表的排序和分页(这些表的数据结构相同)。

据我所知，为了做到这一点，我们需要几个 查看子 (viewchild 的数量等于 table 的数量)。我们还需要初始化几个 MatTableDataSource 对象。我们可以把它放在一个哈希图中，比如:

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

但问题是我们在获取数据之前不知道表的数量。我们应该如何装饰viewchild，让viewchild 的数量与table 的数量相同。

Answer 1

{'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>

在 component2.ts 写这样的东西

import {MatPaginator} from '@angular/material/paginator';

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

@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>