如何將 mat-paginator 中的 pageIndex 傳遞給 Angular 中的 API 9

Question

.html文件

<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 25]"></mat-paginator>
  

.ts 文件

listCustomer() {
   
    this.customerservice
      .getCustomer(this.pageSize, this.paginator.pageIndex + 1)
      .subscribe((res) => {
        this.list = res["success"].data;
        this.dataSource = new MatTableDataSource(this.list);
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
       
    });
}

我的錯誤是：

core.js:4061 ERROR TypeError: Cannot read property 'pageIndex' of undefined

我該如何解決這個問題？

這是stackblatz上的示例

Answer 1

 .getCustomer(this.pageSize, this.paginator.pageIndex + 1)

好像this.paginator是null

你必須使用viewChild來獲取對分頁器的引用

// component
    @ViewChild('paginatorComp') paginator: MatPaginator;

// html
<mat-paginator #paginatorComp [pageSize]="10" [pageSizeOptions]="[5, 10, 25]"> </mat-paginator>

Answer 2

如果您使用 viewChild 可能需要實現 AfterViewInit 循環鈎子並將分頁器使用到此鈎子中。 因為進入 OnInit 你還不能訪問這些數據。