Angular Material mat-paginator 导航被禁用

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>

Angular Material mat-paginator 导航被禁用

Angular Material mat-paginator navigation is disabled

angular-material

angular

mat-table