Angular Paginator не работает после перезагрузки данных - PullRequest
Новая
       70

Angular Paginator не работает после перезагрузки данных

0 голосов
/ 22 октября 2019

Я пытаюсь поделиться таблицей угловых материалов MAT-TABLE между вкладками различных материалов MAT-TABS. Кроме того, я получаю данные от API, поэтому я вызываю функцию при каждом нажатии вкладки.

Данные извлекаются и вставляются в таблицу, но paginator и filter остановленыработает. Рабочий код можно увидеть здесь,

https://stackblitz.com/edit/angular-aq9hja

Вот пример HTML, 

    <mat-tab-group (selectedTabChange)="tabClick($event)"  >
        <mat-tab label="Type1">
            {{debug+1}}<br>
            <ng-container *ngTemplateOutlet="tabContent"></ng-container>
        </mat-tab>
        <mat-tab label="Type2">
            {{debug+1}}<br>
            <ng-container *ngTemplateOutlet="tabContent"></ng-container>
        </mat-tab>
    </mat-tab-group>

    <ng-template #tabContent>
        <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>
        <div class="mat-elevation-z8">
            <table mat-table [dataSource]="getDatasource()" matSort>
                <ng-container matColumnDef="ID">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
                    <td mat-cell *matCellDef="let row"> {{row.ID}} </td>
                </ng-container>
                <ng-container matColumnDef="AUTHOR">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> AUTHOR </th>
                    <td mat-cell *matCellDef="let row"> {{row.AUTHOR }} </td>
                </ng-container>
                <ng-container matColumnDef="COUNT">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> TOTAL ARTS </th>
                    <td mat-cell *matCellDef="let row"> {{row.COUNT}} </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="getDisplayedColumns()"></tr>
                <tr mat-row *matRowDef="let row; columns: getDisplayedColumns();"
                    >
                </tr>
            </table>
            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
        </div>
    </ng-template>

А вот component.ts

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { MatTableDataSource } from '@angular/material/table';
    import { MatSort } from '@angular/material/sort';
    import { MatPaginator } from '@angular/material/paginator';
    import {MatTabsModule} from '@angular/material/tabs';
    import { HttpClient, HttpParams, HttpHeaders, HttpErrorResponse } from '@angular/common/http';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      name = 'Angular';


      constructor(private http: HttpClient) { }

      private dataSource: MatTableDataSource<any>;
      private displayedColumns: string[] = [];
      private isLoading: boolean = true;

      private debug:number=0;

      @ViewChild(MatSort, { static: true }) sort: MatSort;
      @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

      ngOnInit() {
        console.log("NGINIT"+this.debug++);
        this.dataSource = new MatTableDataSource();
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.populateType("", "1", "9999");
      }

      populateType(id: any, page: any, limit: any) {
        ...
      }

        populateForm(id: any, page: any, limit: any) {
        ...
      }

      applyFilter(filterValue: string) {
        this.dataSource.filter = filterValue.trim().toLowerCase();
        if (this.dataSource.paginator) {
          this.dataSource.paginator.firstPage();
        }
      }

      isPageLoading(): boolean {
        return this.isLoading;
      }
      getDatasource(): MatTableDataSource<any> {
        return this.dataSource;
      }
      getDisplayedColumns(): string[] {
        return this.displayedColumns;
      }
      tabClick(event: any) {
        console.log(event.index);
        switch (event.index) {
          case 0: 
          console.log("CASE1"+this.debug++);
          this.populateType('','1','999999');
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
          console.log('Type1');
            break;
          case 1: 
          console.log("CASE2"+this.debug++);
          this.populateForm('','1','999999');
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
          console.log('Type2');
            break;

        }
      }
    }

BUMP

Ответы [ 2 ]

0 голосов
/ 22 октября 2019

Пока вы используете Angular 8, @ViewChild всегда возвращает неопределенное значение, используйте в шаблоне: 

<mat-paginator #matPagi [pageSizeOptions]="[3, 5, 10, 25]"  ></mat-paginator>

и в классе AppComponent 

  @ViewChild('matPagi', { static: true }) paginator: MatPaginator;

И donне забудьте импортировать hammer.js в main.js или polyfils.js из-за зависимостей Angular Material

0 голосов
/ 22 октября 2019

рабочий https://stackblitz.com/edit/angular-yqdsr6 с ответом.

С несколькими mat-paginator вам придется использовать @ViewChildren вместо @ViewChild

Мне также пришлось настроить импорт в вашем app.module.ts

...