angular - 分页 - Angular MatPaginator不工作

我有2个组件,两者都有mat-table和paginator,并且pagination正在为一个组件工作,而不是为另一个组件工作,尽管代码类似。下面是我的html :


<div class="mat-elevation-z8">



 <mat-table [dataSource]="dataSource" matSort>



 <ng-container matColumnDef="col1">


 <mat-header-cell *matHeaderCellDef mat-sort-header> Column1 </mat-header-cell>


 <mat-cell *matCellDef="let row"> {{row.col1}} </mat-cell>


 </ng-container>



 <ng-container matColumnDef="col2">


 <mat-header-cell *matHeaderCellDef mat-sort-header> Column2 </mat-header-cell>


 <mat-cell *matCellDef="let row"> {{row.col2}} </mat-cell>


 </ng-container>



 <!-- Different columns goes here -->



 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>


 <mat-row *matRowDef="let row; columns: displayedColumns;">


 </mat-row>


 </mat-table>



 <mat-paginator #scheduledOrdersPaginator [pageSizeOptions]="[5, 10, 20]"></mat-paginator>


 </div>



下面是我在component.ts中的代码:


dataSource: MatTableDataSource<any>;


displayedColumns = ['col1', 'col2', ... ];


@ViewChild('scheduledOrdersPaginator') paginator: MatPaginator;


@ViewChild(MatSort) sort: MatSort;


ngOnInit(): void {


 // Load data


 this.dataSource = new MatTableDataSource(somearray);


 this.dataSource.paginator = this.paginator;


 this.dataSource.sort = this.sort;


}



类似的代码正在为另一个组件工作,并且正确地使用分页呈现表,不知道这段代码有什么问题。

任何帮助都会非常有用

时间:

我解决了一个类似的问题,它是通过,尝试这个:


setTimeout(() => this.dataSource.paginator = this.paginator);



这是正确和优雅的处理问题的方法。

尝试将AfterViewInit接口添加到类中,然后,this.dataSource.paginator = this.paginator 内部ngAfterViewInit()方法


 ngAfterViewInit() {


 this.dataSource.paginator = this.paginator


 }



那么你就不需要调用workaround setTimeout"

为了使它工作,我必须在从源提取数据后设置分页程序,


getVariables() {


 this.activeRoute.params.subscribe(params => {


 if (params['id'] && (params['type'] === Type.CodeList)) {


 this.dataService


 .getItems(this.currentLanguage, params['id'])


 .subscribe((items: any) => {


 this.dataSource.data = this.items;


 this.dataSource.paginator = this.paginator;


 })


 }


 })


}



我是角度和打字稿的初学者,但是,在遇到同样的问题后(除了,对我来说排序也没有用),有什么帮助创建了一个函数'refreshDataScource()'从ngAfterViewInit()以及每次服务器响应新数据后调用它。在这个函数中,我只是用分页器和排序器刷新dataSource ,就像这个:


refreshDataSource() {


 this.dataSource = new MatTableDataSource(myDataArray);


 this.dataSource.paginator = this.paginator;


 this.dataSource.sort = this.sort;


 }



它修复了paginator和排序,现在一切正常,但是,我不确定它是否只是一个解决方案或真正的修复。

设置数据源调用ChangeDetectorRef.detectChanges()后,立即执行以下操作:


// First import ChangeDetectorRef & Material related stuff


import { ..., ChangeDetectorRef } from '@angular/core';


import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';



// Set properties in your component


@ViewChild(MatSort) sort: MatSort;


@ViewChild(MatPaginator) paginator: MatPaginator;



// Inject in constructor


constructor (..., private cdr: ChangeDetectorRef, ...) { ... }



// Set data source and invoke detectChanges()


this.dataSource = new MatTableDataSource (MY_DATA);


this.cdr.detectChanges();



// after that you can set other properties like


this.dataSource.sort = this.sort;


this.dataSource.paginator = this.paginator;



使用setTimeOut()将暂时解决这个问题,但是,如果你将大量数据加载到中,这又将失败。

我们发现,如果设置数据源分配器之前设置了大数据集,MatTable将非常缓慢地加载。


ngOninit(){


// initialize dataSource here


}


 ngAfterViewInit() {


 this.dataSource.sort = this.sort;


 this.dataSource.paginator = this.paginator;



 /* now it's okay to set large data source... */


 this.dataSource.data = [GetLargeDataSet];}



因此,首先初始化data-Source,并且设置属性,如"Paginator "或"Sort ",然后将数据推送到源中,进入"Data "财产。


 <mat-paginator


 #scheduledOrdersPaginator


 (page)="pageEvent($event)">


 </mat-paginator>


 pageEvent(event){


 //it will run everytime you change paginator


 this.dataSource.paginator = this.paginator;


 }



不使用setTimeout的解决方案是使用set





 @ViewChild(MatPaginator) paginator: MatPaginator;



 set matPaginator(mp: MatPaginator) {


 this.paginator = mp;


 this.dataSource.paginator = this.paginator;


 }



我的例子中,异步来自服务的数据既不能使用ngOnInit也不能使用ngAfterViewInit,我使用了ngOnChanges,如下所示:


ngOnChanges(change: SimpleChanges) {


 if (change.properties) {


 if (this.properties.length > 0) {


 this.dataSource = new MatTableDataSource(this.properties);


 this.dataSource.paginator = this.paginator;


 }


 }


 }

一定要将html的mat-table元素的[DataSource]属性设置为组件的数据源属性,以确保数据源与表和paginator绑定。

...