【发布时间】:2021-04-15 01:45:49
【问题描述】:
我试图在点击分页时调用 API。最初,我有 静态设置长度,它工作正常。我能够做一个 分页API调用。然后我尝试动态设置长度 也一样,它也有效,但后来,它停止了工作。请 帮我指出我的错误。 我正在 this.totalEmp 中设置内容的长度,并且也能够在 html 端打印它但是当我尝试设置时 [长度] 的垫子分页器。它对我不起作用。我试图设置 #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;
}
【问题讨论】:
标签: angular pagination angular-material angular9 mat-pagination