проблемы с подключением paginator к MatTable - PullRequest
Новая
       54

проблемы с подключением paginator к MatTable

0 голосов
/ 20 декабря 2018

Я пытаюсь добавить нумерацию страниц в свою таблицу матов в Angular 6. Я использую некоторые примеры в ссылке ниже.Но это не работает:

https://material.angular.io/components/table/examples

Похоже, что таблица матов правильно заполняется данными, а под ним правильно отображается страница, но они не могут соединиться вместе:

enter image description here

Как видите, для пагинатора установлено 5 записей на страницу, но на текущей странице таблицы больше, чем записей.В нем также указано 0 из 0, что дополнительно указывает на ошибку при ссылке на таблицу.

Вот мой HTML-код: 

    <mat-table #table [dataSource]="dataSource" class="animate topMatDataTable”>
…
     </mat-table>
      <mat-paginator [pageSizeOptions]="[5, 10, 20]" [pageSize]="5" showFirstLastButtons></mat-paginator>

Вот мой код TS: 

export class DynamicDataListComponent implements OnInit {
…
  dataSource : MatTableDataSource<any>;
…
  @ViewChild(MatPaginator) paginator : MatPaginator;
…
  ngOnInit() {
…
    this.loadEndpoints();
  }

  async loadEndpoints() {
…
      const endpointListObs = await this._dataStorageService.getAPIEndpointList();
      endpointListObs.subscribe((endpointList: any[]) => {
        this.dataSource = new MatTableDataSource<any>(endpointList);
        this.dataSource.paginator = this.paginator;
…
      });
…
  }
…
}

Может кто-нибудь сказать, что я делаю не так?

Спасибо.

Ответы [ 3 ]

0 голосов
/ 20 декабря 2018

Вы установили paginator источника данных на свой paginator? 

ngOnInit() {
    this.dataSource.paginator = this.paginator; //this sets the paginator to your datasource
 ....
    this.loadEndpoints();
}
0 голосов
/ 20 декабря 2018

Я понял это.

Оказывается, таблица вместе с paginator были внутри div с оператором ngIf: 

<div *ngIf="!isLoading">
...
</div>

Это означало, что paginator не отображалсяпока данные не были загружены в таблицу.

Итак, во-первых, я взял инициализацию MatTableDataSource и назначение paginator в ngAfterViewInit ().В loadEndpoints () я присвоил endpointList переменной вместо этого: 

this.endpointList = endpointList

Во-вторых, я поместил тайм-аут в ngAfterViewInit (), который запускается, если isLoading имеет значение true или если размер списка равен 0. В противном случаеЗатем я инициализирую MatTableDataSource с помощью переменной endpointList и назначаю ей paginator: 

ngAfterViewInit() {
    if (this.isLoading || this.listSize === 0) {
      setTimeout(() => {
        this.ngAfterViewInit();
      }, 1000);
    } else {
      this.dataSource = new MatTableDataSource<any>(this.endpointList);
      this.dataSource.paginator = this.paginator;
    }
}

И это работает!

0 голосов
/ 20 декабря 2018

В вашем шаблоне отсутствует ссылка на ваш paginator.Измените свой шаблон, чтобы включить #paginator:

<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" [pageSize]="5" showFirstLastButtons></mat-paginator>

...