Vyhledávání na webu

javascript - inicializace stránkovače Angular Material 2 s tabulkou mat-table

Snažím se, aby komponenta stránkování Angular Material 2 fungovala s komponentou tabulky (direktivou mat-table).

Řídil jsem se dokumentací mat-table, abych přidal stránkovací prvek, a snažil se, aby jejich příklad fungoval s mojí stávající funkční mat tabulkou.

V souboru component.html mám funkční mat tabulku a stránkovací ovladač:

<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>

Komponenta, která používá tento HTML, implementuje ngOnInit:

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

A komponenta získá stránkovač pomocí @ViewChild:

@ViewChild(MatPaginator) paginator: MatPaginator;

Problém je v tom, že stránkovač nic nedělá a tlačítka Další a Předchozí jsou šedá.

Console.log(this.paginator) dává:

_changeDetectorRef: Objekt { _view: {…}, _viewContainerRef: null, _appRef: null } _displayedPageSizeOptions: Pole(3) [ 5, 10, 20 ] _hidePageSize: false _initialized: true _intl: Objekt { itemsPerPageLabel: "Položek na stránku:", nextPageLabel: "Další stránka", previousPageLabel: "Předchozí stránka", … } _intlChanges: Objekt { closed: false, syncErrorThrown: false, syncErrorThrowable: false, … } _length: 0 _pageIndex: 0 _pageSize: 10 _pageSizeOptions: Pole(3) [ 5, 10, 20 ] _showFirstLastButtons: true page: Objekt { _isScalar: false, closed: false, isStopped: false, … } proto: Objekt { pageIndex: Getter & Setter, length: Getter & Setter, pageSize: Getter & Setter, … }

Nevím, jak ladit/pochopit, co způsobuje, že stránkování nefunguje.

Můj BasicDataSource rozšiřuje DataSource a používání ngAfterViewInit nefunguje, protože this.datasource je v této chvíli nedefinované (API volání ještě není dokončeno).

Odpověď č. 1

Inicializujte stránkovač po inicializaci zobrazení.

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

Inicializujte datový zdroj s prázdným polem.

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

Související články