数据重新加载后Angular Paginator不工作答案

【问题标题】：Angular Paginator not working after data reload数据重新加载后Angular Paginator不工作
【发布时间】：2019-10-21 21:16:52
【问题描述】：

我正在尝试在不同的材料选项卡 MAT-TABS 之间共享一个 Angular 材料表 MAT-TABLE。另外，我从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;

        }
      }
    }

碰撞

【问题讨论】：

标签： angular paginator mat-table mat-tab

【解决方案1】：

有答案的工作https://stackblitz.com/edit/angular-yqdsr6。

如果有多个mat-paginator，您必须使用@ViewChildren 而不是@ViewChild

我还必须调整您的 app.module.ts 中的导入

【讨论】：

非常感谢！一点点，我如何访问QueryList 中的第二、第三项。 first 和 last 我明白了。
angular.io/api/core/QueryList;您可以使用toArray() 方法或使用普通数组之类的方法； map, forEach 等..你能在另一个帖子上标记另一个答案吗:)

【解决方案2】：

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

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

在课堂上AppComponent

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

并且不要忘记在您的main.js 或polyfils.js 中导入hammer.js，因为Angular Material 的依赖项

【讨论】：