ERROR 错误：无法设置未定义的属性“分页器”

Question

我正在使用此示例创建 Angular 材质表： https://github.com/marinantonio/angular-mat-table-crud。 该示例使用来自“@angular/cdk/table”的 { DataSource } 连接到表。

对于我的项目，我需要使用来自 '@angular/material' 的 MatTableDataSource 作为表格数据连接器，一旦我将代码更改为使用 MatTableDataSource，我就会不断得到 TypeError：无法设置未定义的属性“分页器”。

我的问题有一个重现 https://stackblitz.com/edit/angular-3rhawr

我做错了什么？任何帮助将不胜感激。

Answer 1

this.exampleDatabase.getAllIssues() 本质上是异步的，可能需要一些时间才能完成。但在此之前将调用ngAfterViewInit。而且由于dataSource是在this.exampleDatabase.getAllIssues()的subscribe块中设置的，因此会出现错误。

通过将代码从 ngAfterViewInit 移动到 subscribe 块中来修复它。像这样的：

public loadData() {
  this.exampleDatabase = new DataService(this.httpClient);
  this.exampleDatabase.getAllIssues().subscribe(data => {
    this.dataSource = new MatTableDataSource(data);
    this.dataSource.data = data;
    this.dataLength = data.length;

    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  });
}

这是一个Working Sample StackBlitz，您的参考没有错误。