垫子上的分页器不起作用答案

【问题标题】：Paginator of mat table notworking垫子上的分页器不起作用
【发布时间】：2019-07-07 05:52:00
【问题描述】：

我是 angular 和 typescript 的新手，我正在尝试用分页器设置一个表格。分页器数据集来自 REST api。到目前为止，API 工作正常，我成功获取了数据。

很遗憾，分页器目前无法正常工作。

进口没问题。从 REST 服务获取数据后，我正在分配数据，但我仍然收到此错误消息：

ERROR TypeError: Cannot set property 'paginator' of undefined

我做错了什么？

 availableLanguages: ILanguage[];
  displayedColumns = ['language'];
  dataSource: MatTableDataSource<ILanguage>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(public service: DialectService) {}

  ngOnInit(): void {
    this.service.getLanguages()
      .subscribe((resp: ILanguage[]) => {
        this.availableLanguages = resp;
        this.dataSource = new MatTableDataSource(resp);
      });
  }


  /**
   * Set the paginator and sort after the view init since this component will
   * be able to query its view for the initialized paginator and sort.
   */
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }



  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
    console.log(this.dataSource.filter, filterValue);
  }
}


<!--   -->
<div class="example-header">
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
</div>

<div class="example-container mat-elevation-z8">

  <mat-table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="language">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Language </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row}} </mat-cell>
    </ng-container>


    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;">
    </mat-row>
  </mat-table>

  <mat-paginator [pageSizeOptions]="[1, 2, 25, 100]"></mat-paginator>
</div>

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

尝试将所有数据集初始化代码移至ngAfterViewInit。如下所示。

availableLanguages: ILanguage[];
displayedColumns = ['language'];
dataSource: MatTableDataSource<ILanguage>;

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

constructor(public service: DialectService) {}

ngOnInit(): void { }

ngAfterViewInit() {
    this.service.getLanguages()
        .subscribe((resp: ILanguage[]) => {
            this.availableLanguages = resp;
            this.dataSource = new MatTableDataSource(resp);
            this.dataSource.paginator = this.paginator;
            this.dataSource.sort = this.sort;
        });
}

由于对this.service.getLanguages() 的调用是异步的，所以在ngAfterViewInit 生命周期钩子触发时它还没有完成。因此，当ngAfterViewInit 尝试将paginator 分配给this.dataSource 时，它仍然是未定义的。

【讨论】：