Angular Material 分頁器 nextPage 屬性

Question

我總共有250項目，我正在顯示其中的5 ，即pageSize設置為 5。我已經將paginator.length屬性設置為items.length

現在，這里有兩個問題：

即使我已經手動設置了paginator.length但當我console.log paginator 的屬性時，它顯示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';

希望能幫助到你！