时间戳

首页 > 解决方案 > 如果将 matTableDataSource 放入 angular 中的类似 hasmap 结构中，如何进行排序和分页

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

问题描述

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

据我了解，为了做到这一点，我们需要多个viewChild（viewchild 的数量等于表的数量）。我们还需要初始化多个 MatTableDataSource对象。我们可以把它放在一个 hashmap 中，比如：

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

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

标签： javascriptangular

解决方案

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

推荐阅读