问题描述
我试图通过点击分页来调用 API。最初,我有 静态设置长度,它工作正常。我能够做一个 分页 API 调用。然后我尝试动态设置长度 同样,它也有效,但后来,它停止工作了。请 帮我指出我的错误。 我正在 this.totalEmp 中设置内容的长度,并且也能够在 html 端打印它,但是当我尝试设置时 [length] 的 mat-paginator。它对我不起作用。我试图设置 #paginator 在 mat-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;
}
解决方法
错误:您正在针对每个请求初始化以下几行。
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
解决方案:根据您的最佳需要,通过放置一些条件或在 ngAfterViewInit
方法中只初始化这些行一次。