mat-paginator长度不起作用.无法设置

Question

我正在尝试在点击分页时调用API。最初，我静态设置长度，效果良好。我能做一个分页API调用。然后我试着动态设置长度它也起作用，但后来，它停止了作用。请帮我指出我的错误。我正在设置this.totalEmp中内容的长度，并且可以在html面上打印，但当我尝试设置时mat-paginator表示[length]。这对我不起作用。我试着设置#mat-paginator中也有paginator，但没有变化。

Below is my implementation

**HTML:**
<mat-paginator 
[length]="totalEmp"
[hidden]="normalPagination"
[pageSize]="2" 
[pageSizeOptions]="[2]"
[pageIndex]="pageIndex"
(page)="pageEvent = getDataByPagination($event)"></mat-paginator>
**.ts file Code**
export class EmpComponent implements OnInit {

dataSource: any;
totalEmp: number=0;
normalPagination: boolean;

@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;

ngOnInit() {
this.getTableContentCount();
}


getTableContentCount() {
this.myService.CountService().subscribe(
(response: any) => {
if (response) {

this.totalEmp = response;
this.getServerData(0,this.totalEmp);
}
},
(error: any) => { }
);
}

public getDataByPagination(event?: PageEvent) {
this.myService.getPaginationService(event).subscribe(
response => {
if (response) {
this.showLoader=true;
this.normalPagination=false;
this.total = this.totalEmp;      
this.allData=response;
this.dataSource = new MatTableDataSource(this.allData);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.showLoader=false;
}
},
error => {
// handle error
}
);
return event;
}

Answer 1

错误：您正在初始化每个请求中的以下行。

this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;

解决方案：根据您的最佳需要，通过放置一些条件或在ngAfterViewInit方法中只初始化这些行一次。

Answer 2

使用@ViewChild(MatPaginator, { read: true }) paginator: MatPaginator;使分页器工作于

https://www.freakyjolly.com/angular-material-12-server-side-table-pagination-example/#comment-23556