MatPagination: mat-table не обновляет лимит предметов при смене MatPaginator - PullRequest
0 голосов
/ 28 апреля 2018

Я пытаюсь разбить свой стол на страницы. У меня есть полная реализация Угловая таблица материалов с нумерацией страниц (https://material.angular.io/components/table/overview#pagination)

Поскольку я использую Angularfire2, моим источником данных является Observable.

this.items = this.itemsCollection.valueChanges();  

Я прочитал, что я должен использовать

dataSource = new MatTableDataSource<Item>;

для создания рабочего соединения между таблицей и пагинатором.

Я заполняю источник данных на

let subscription = this.items.subscribe(
      newData => { this.dataSource.data = newData });

и обновите paginator источника данных с помощью

ngAfterViewInit() {
   this.dataSource.paginator = this.paginator;
}

, где this.paginator определяется

@ViewChild(MatPaginator) paginator: MatPaginator

как объяснено в Документе по компонентам Angular Material.

paginator (mat-paginator) работает нормально. Однако моя проблема заключается в том, что таблица не обновляется и продолжает показывать все значения. Начальные значения this.paginator также не передаются в ограничение таблицы.

Я нашел известную ошибку , но я не уверен, относится ли это к моей проблеме ...

Кто-нибудь может мне помочь?

Спасибо заранее!

1 Ответ

0 голосов
/ 30 апреля 2018

Обновление

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

<mat-table #table [dataSource]="dataObservable | async | slice: a:b">

и в моем компоненте данных я слушал событие изменения элемента HTML "mat-paginator"

(page)="changePage($event)"

В моем компоненте я могу легко установить нарезанные данные

a = 0;
b = this.limit;
changePage(ev) {
  console.log(  ev );
  this.a = ev.pageIndex * ev.pageSize;
  this.b = this.a + ev.pageSize;
  console.log(this.a);
  console.log(this.b);
}
...