Как установить длину опоры для материала angular paginator - PullRequest
Новая
       13

Как установить длину опоры для материала angular paginator

0 голосов
/ 05 января 2020

Вот как выглядит мой mat-paginator: 

<mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="100"></mat-paginator>

В основном я пытаюсь реализовать типичную идею разбиения на страницы: сервер не возвращает все данные, он возвращает их часть и затем, когда открывается новая страница, она переходит к другой части данных. Чтобы сделать это, мне нужно сообщить paginator, сколько элементов в базе данных, то есть мне нужно предоставить ему length prop.

Я попытался установить его в множество способов, прямо как в строке выше или внутри метода, где я делаю запрос get. Например: 

this.paginator.length = 100;

Действительно, длина должна исходить от сервера, но пока для целей отладки я просто жестко ее кодирую. 

    this.dataSourceService.findAll().subscribe(
      records => {
        this.paginator.length = 100;

        this.dataSource.data = records.map(
          record => new Record().deserialize(record)
        )
      }
    )

Тем не менее значение длины, которое я получаю на client равен числу элементов, содержащихся в массиве, который я получаю в ответе сервера.

Что я делаю неправильно и почему значение длины не установлено на 100.

РЕДАКТИРОВАТЬ :

Хорошо, вот еще один соответствующий код.

Внутри компонента я делаю следующее: 

dataSource = new MatTableDataSource<Record>();
pageSizeOptions: number[] = [5, 10, 20];

inside OnInit() У меня также есть следующая строка: this.dataSource.paginator = this.paginator;

1 Ответ

1 голос
/ 05 января 2020

Я использую это следующим образом 

<mat-paginator
          [pageSize]="pageSize"
          [pageIndex]="pageNumber-1"
          [pageSizeOptions]="[10, 25, 50, 100]"
          [length]="itemCount"
          (page)="changePaging($event)"
>

Допустим, что возвращаемым значением вашей наблюдаемой является объект {list: [], count: xx} count - это общее количество элементов (без нумерации страниц) 

this.list$ = this.dataSourceService
      .findAll()
      .pipe(tap(r => (this.itemCount = r.count)));

конечно, после этого вы можете подписаться на дополнительные действия ...

также проверьте документы https://material.angular.io/components/paginator/api

...