угловой материал 2 пагинатора с инициализацией таблицы - PullRequest
Новая
       27

угловой материал 2 пагинатора с инициализацией таблицы

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

Я пытаюсь заставить компонент paginator углового материала 2 работать с компонентом таблицы (директива mat-table).

Я следовал документации документации mat-table, чтобы добавить paginator, пытаясь привести их примерработать с моей существующей таблицей рабочих матов.

В файле component.html у меня есть таблица рабочих матов и paginator: 

<div class="example-container">
    <mat-table [dataSource]="dataSource">
    // columns and rows
    </mat-table>
    <mat-paginator #paginator
                   [pageSize]="10"
                   [pageSizeOptions]="[5, 10, 20]"
                   [showFirstLastButtons]="true">
    </mat-paginator>
</div>

Компонент, использующий этот html, реализует ngOnInit: 

ngOnInit() {
    myapi.apirequest()
          .subscribe((dataResponse: any) => {
            this.dataSource = new BasicDataSource(dataResponse);
            this.dataSource.paginator = this.paginator;
            console.log(this.paginator);
          });
      });
  }

И компонент получает paginator, используя @ViewChild: 

@ViewChild(MatPaginator) paginator: MatPaginator;

Проблема заключается в том, что paginator ничего не делает, а следующие и предыдущие кнопки неактивны.

console.log (this.paginator) дает:

_changeDetectorRef: Object {_view: {…}, _viewContainerRef: null, _appRef: null} _displayedPageSizeOptions: Array (3) [5,10, 20] _hidePageSize: false _initialized: true _intl: Object {itemsPerPageLabel: «Элементы на странице:», nextPageLabel: «Следующая страница», previousPageLabel: «Предыдущая страница»,…} _intlChanges: Object {closed: false, syncErrorThrown: false, syncErrorThrowable: false,…} _length: 0 _pageIndex: 0 _pageSize: 10 _pageSizeOptions: Array (3) [5, 10, 20] _showFirstLastButtons: true page: Object {_isScalar: false, закрыто: false, isStopped: false,…} proto : Object {pageIndex: Getter & Setter, длина: Getter & Setter, pageSize: Getter & Setter,…}

Я не знаю, как отладить / понять, что приводит к неработоспособности пагинатора.

Мой BasicDataSource расширяет DataSource и использует работу ngAfterViewInit, потому что this.datasource на данный момент не определен (вызов API не завершен).

1 Ответ

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

Инициализировать paginator после просмотра init. 

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

Инициализация источника данных с пустым массивом. 

ngOnInit() {
            this.dataSource = new BasicDataSource([]);
    myapi.apirequest()
          .subscribe((dataResponse: any) => {
            this.dataSource = new BasicDataSource(dataResponse);
            this.dataSource.paginator = this.paginator;
            console.log(this.paginator);
          });
      });
  }
...