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 [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>