Angular Material mat-paginator 导航被禁用

Question

我想使用带有 mat-paginator 的 Angular mat-table 来通过 http 请求控制页面更改。所以，我从我的服务器收到一个具有以下属性的对象:

content: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
first: true
last: false
number: 0
numberOfElements: 10
pageable: {sort: {…}, offset: 0, pageSize: 10, pageNumber: 0, paged: true, …}
size: 10
sort: {sorted: false, unsorted: true}
totalElements: 82
totalPages: 9
__proto__: Object

属性“number”是当前页数，“totalPages”是我拥有的总页数。

我尝试像这样实现 mat-paginator:

<mat-paginator [length]="paginas" [pageSize]="10"></mat-paginator>

变量“paginas”存储属性“totalPages”，并且显示正确:

问题是，如您所见，箭头按钮预览和前进被禁用。我知道我必须做更多的实现，但是 Angular Material 的官方文档并没有说明如何去做。

Answer 1

经过一些研究和尝试错误的策略后，我找到了解决我的问题的解决方案。我犯了两个基本错误:

1) mat-paginator 标签中的 [length] 属性是元素的总数。因此，我使用对象的“totalElements”而不是“totalPages”，然后箭头按钮开始起作用。

2) 我发现我需要在一个名为 ngAfterViewInit() 的方法中设置 [length]

我的组件现在是这样的:

  ngOnInit() {     
  }

  ngAfterViewInit(): void {
    this.gestaoAcessoService.getAllUsuarioPage(this.page)
    .subscribe(data => 
      { 
        this.usuarios = data['content'];
        this.length = data['totalElements'];
      })
  }

  setPage(event) {
    this.page = event.pageIndex;
    this.getUsers();
}

  getUsers() {
    this.gestaoAcessoService.getAllUsuarioPage(this.page)
    .subscribe(data => 
      { 
        this.usuarios = data['content'];
        this.length = data['totalElements'];
      })
  }

在我的 html 中我添加了 (page)="pageEvent = setPage($event)" 你只需要声明方法“setPage(event)”，在这种情况下我只需要pageIndex 并请求服务器到下一页；

<mat-paginator [length]="length" [pageSize]="10" [showFirstLastButtons]="true" (page)="pageEvent = setPage($event)">
</mat-paginator>