Question

我有一个通用组件，用于查看包含动态字段的查询结果。

我使用mat-table查看数据，但是分页和排序功能不起作用。

函数setDataSource是从父组件调用的。

我认为这是因为数据源声明未实现接口。

如何设置带有动态界面的数据源？

我的HTML：

<mat-table matTableExporter matSort #exporter="matTableExporter" [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container *ngFor="let disCol of displayedColumns;let colIndex=index" matColumnDef="{{disCol}}">
        <mat-header-cell *matHeaderCellDef mat-sort-header>{{disCol}} </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element[disCol]}} </mat-cell>
    </ng-container>
    <mat-header-row mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 50]" showFirstLastButtons></mat-paginator>
<button mat-raised-button (click)="exporter.exportTable('xlsx', {fileName:'report', sheet: 'sheet 1', Props: {Author: 'Me'}})">Excel</button>

TypeScript：

displayedColumns: string[] = [];
dataSource: any = [];
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;

public setDataSource(data,column) {
    this.displayedColumns = column;
    this.dataSource = data;
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

Answer 1

我遇到了类似的问题，并通过在每次数据更改时生成一个新的数据源并设置了分页器和排序器来解决该问题。

编辑：为分页器和分类器添加设置器，并将static属性更改为false。在setDataSource函数中设置分页器和分类器之前，还应添加检查。

@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator; // change static to false here
@ViewChild(MatPaginator, {static: false}) set matPaginator(value: MatPaginator) {
  if(this.dataSource && value) {
    this.dataSource.paginator = value;
  }
}

@ViewChild(MatSort, {static: false}) sort: MatSort; // change static to false here
@ViewChild(MatSort, {static: false}) set matSort(value: MatSort) {
  if(this.dataSource && value) {
    this.dataSource.sort = value;
  }
}

public setDataSource(data,columns) {  // data -> array of elements; columns -> columns you wish to display
  this.displayedColumns = columns;        
  this.dataSource = new MatTableDataSource<any>(data);  // replace any with your data type
  if(this.paginator) {   // add check here
    this.dataSource.paginator = this.paginator;
  }
  if(this.sort) {  // add check here
    this.dataSource.sort = this.sort;
  }
}

Answer 2

如果将完整的数据加载到客户端，则应使用MatTableDataSource。该类旨在用于客户端数据数组的过滤，排序和分页。

在服务器端进行过滤，排序和分页时，不适合使用此类。在这种情况下，相关数据可以保存在一个简单的数组中，因此无需实现特定的接口。 https://blog.angular-university.io/angular-material-data-table/提供了一个很好的示例。

为物料表数据源创建动态接口

2 个答案: