Angular 分页器在数据重新加载后不工作

Question

我正在尝试在不同的 material 选项卡 MAT-TABS 之间共享 Angular material table MAT-TABLE。另外，我从 API 获取数据，所以我在每次点击选项卡时调用一个函数。

正在检索数据并将其插入 table，但 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;

        }
      }
    }

颠簸

Answer 1

一个有效的https://stackblitz.com/edit/angular-yqdsr6答案。

对于多个 mat-paginator，您必须使用 @ViewChildren 而不是 @ViewChild

我还必须调整您 app.module.ts

中的导入

Answer 2

当您使用 Angular 8 时，@ViewChild 总是返回一个未定义的，在模板中使用：

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

并在 class AppComponent

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

不要忘记在 main.js 或 polyfils.js 中导入 hammer.js 因为 Angular Material 的依赖性

Angular 分页器在数据重新加载后不工作

Angular Paginator not working after data reload

paginator

angular

mat-tab

mat-table