Angular 为物料表数据源创建动态界面

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

我使用

mat table

查看数据，但分页和排序功能不起作用

从父组件调用函数

setDataSource

我认为这是因为datasource声明没有实现接口

如何使用动态接口设置数据源

我的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>

---

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

编辑：为分页器和分拣器添加setter，并将

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;
  }
}

@ViewChild（MatPaginator，{static:false}）paginator:MatPaginator；//在此处将static更改为false
@ViewChild（MatPaginator，{static:false}）集合MatPaginator（值：MatPaginator）{
if（this.dataSource&&value）{
this.dataSource.paginator=值；
}
}
@ViewChild（MatSort，{static:false}）sort:MatSort；//在此处将static更改为false
@ViewChild（MatSort，{static:false}）设置MatSort（值：MatSort）{
if（this.dataSource&&value）{
this.dataSource.sort=值；
}
}
公共setDataSource（数据，列）{//data->元素数组；列->要显示的列
this.displayedColumns=列；
this.dataSource=new MatTableDataSource（data）；//用您的数据类型替换any
如果（this.paginator）{//在此处添加检查
this.dataSource.paginator=this.paginator；
}
如果（this.sort）{//在此处添加检查
this.dataSource.sort=this.sort；
}
}

如果将完整数据加载到客户端，则应使用

MatTableDataSource

。此类旨在用于筛选、排序和分页客户端数据数组

---

在服务器端完成筛选、排序和分页时，不适合使用此类。在这种情况下，相关数据可能保存在一个简单的数组中，因此无需实现特定的接口。这是一个很好的例子

请提供最小的可复制示例，例如在fiddle中-这将大大加快回答速度。在我的情况下，排序和分页在客户端。您的表或分页器是否包装在

ngIf

中？是的，表和分页器都是内部ngIf，但是表格工作，分页器显示但不工作！非常感谢。对不起，我是新来的，还不能投票。在G-d的帮助下，我将稍后投票。

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