角材料垫-分页器导航已禁用

Question

我想将Angular mat-table与mat-paginator一起使用，以通过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

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

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>