角度材质分页器下一页属性

Question

我总共有250个项目，我正在显示其中的5个，即pageSize设置为 5。 并且我已将paginator.length属性设置为items.length

现在，这里有两个问题：

即使我手动设置了paginator.length但是当我console.log分页器的属性时，它会显示5(这是我每页显示的项目数(。 因此，分页器的next按钮被禁用。

如何启用next按钮，以便在单击它时我知道并向服务器请求下一个数据。 请记住：在这方面，我只使用后端分页。 分页信息在从服务器的响应标头中传递。 这是我的代码

pageIndex=1;
pageNumber;
pagination;
ngOnInit(): void {
this.paginator.pageSize = 5;
this.paginator.pageIndex = this.pageIndex;
this.salesReportService.getDailyReport().subscribe((response) => {
console.log('Response of sales report : ', response);
this.reports = response.body;
this.pagination=response.headers.get('X-Pagination');
console.log('PaginationInformation: ',this.pagination)
this.paginator.length=this.pagination.TotalCount;
console.log('paginator properties: ', this.paginator);
console.log('paginator hasNextpage(): ', this.paginator.hasNextPage());
this.dataSource = new MatTableDataSource(this.reports);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}, (error) => {
console.log('Error occured while fetching sales report: ', error);
});
}
// here I'd call the function to get the next data when the next button of paginator is clicked.
// something like this
this.salesReportService.getReports(pageNumber:2) 

Answer 1

这是因为您首先设置了分页器长度，然后尝试在以下行中执行

this.dataSource = new MatTableDataSource(this.reports);
this.dataSource.paginator = this.paginator;

这使得分页器将长度设置为数据源中可用的数据。

因此，在上述两行之后，将以下行保留在代码中。

this.paginator.length=this.pagination.TotalCount; // this.paginator.length= 'No Of Records';

希望对您有所帮助！