Angular 角材质材质材质分页器导航已禁用

我想使用带有mat paginator的Angular mat表，通过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，并正确显示：

---

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

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

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，您只需声明setPageevent方法，在这种情况下，我只需获取pageIndex并要求服务器进入下一页

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

---

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

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，您只需声明setPageevent方法，在这种情况下，我只需获取pageIndex并要求服务器进入下一页

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

---

而不是Pagina，在长度上你必须传递totalElements，它将代替Pagina工作，在长度上你必须传递totalElements，它将工作