创建物料表数据源的动态界面
创建物料表数据源的动态界面
提问于 2019-12-02 11:58:08
我有一个通用组件，用于查看包含动态字段的查询结果。
我使用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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-02 12:28:03
我也遇到了类似的问题，每次数据变化时都生成一个新的数据源，然后设置分页器和分类器，从而解决了这个问题。
编辑：为分页器和排序器添加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;
}
}Stack Overflow用户
发布于 2019-12-02 12:33:11
如果将完整的数据加载到客户端，则应使用MatTableDataSource。此类用于对客户端数据数组进行筛选、排序和分页。
在服务器端进行筛选、排序和分页时，使用此类是不合适的.在这种情况下，相关数据可以保存在一个简单的数组中，因此不需要实现特定的接口。在https://blog.angular-university.io/angular-material-data-table/给出了一个很好的例子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59138484
复制相关文章
相似问题
腾讯云开发者
