Angular Material mat-paginator навигация отключена

Я хотел бы использовать 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 не показывает, как это сделать.


angular angular-material mat-table
person Murilo Góes de Almeida    schedule 19.07.2019    source источник
comment
вместо paginas, in length вы должны передать totalElements, и это будет работать ‹mat-paginator [length] = totalElements [pageSize] = 10› ‹/mat-paginator›   -  person Sumit Vekariya    schedule 16.10.2019

Ответы (1)


arrow_upward
7
arrow_downward

После некоторых исследований и тактики попыток и ошибок я нашел решение, которое решает мою проблему. Я сделал 2 основные ошибки:

1) Атрибут [length] в теге mat-paginator - это общее количество элементов. Итак, я использовал «totalElements» моего объекта вместо «totalPages», тогда кнопки со стрелками начали работать.

2) Я понял, что мне нужно установить [длину] в методе под названием ngAfterViewInit ()

Теперь мой компонент такой:

  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>
person Murilo Góes de Almeida    schedule 19.07.2019