Angular Material 分页器 nextPage 属性答案

【问题标题】：Angular Material paginator nextPage propertyAngular Material 分页器 nextPage 属性
【发布时间】：2020-05-07 23:00:00
【问题描述】：

我总共有 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)

【问题讨论】：

我面临同样的问题。上面的答案对我没有帮助。 stackoverflow.com/questions/66060058/…

标签： javascript angular angular-material

【解决方案1】：

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

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

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

所以，在上面两行之后，在你的代码中保留下面一行。

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

希望对你有帮助！

【讨论】：