错误错误:无法设置未定义的属性"paginator" [英] ERROR Error: Cannot set property 'paginator' of undefined

问题描述

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

I am creating Angular material table using this example: https://github.com/marinantonio/angular-mat-table-crud. The sample is connecting to the table using { DataSource } from '@angular/cdk/table'.

对于我的项目，我需要将'@ angular/material'中的MatTableDataSource用作表数据连接器，一旦我更改了代码以使用MatTableDataSource，我就不断得到 TypeError:无法设置未定义的属性"paginator" .

For my project i need to used MatTableDataSource from '@angular/material'as a table data connector, once i change the code to use MatTableDataSource i keep getting TypeError: Cannot set property 'paginator' of undefined.

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

我在做什么错?任何帮助将不胜感激.

What am I doing wrong ? Any help will be appreciated.

推荐答案

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

this.exampleDatabase.getAllIssues() is async in nature and may take time to complete. But ngAfterViewInit is going to be called before that. And since the dataSource is set in the subscribe block of this.exampleDatabase.getAllIssues(), hence the error.

通过将代码从 subscribe 块中的 ngAfterViewInit 中移出代码来修复该问题.像这样:

Fix it by moving the code from ngAfterViewInit in the subscribe block. Something like this:

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;
  });
}

这是一个 工作示例StackBlitz ，但没有错误供您参考.

Here's a Working Sample StackBlitz without the error for your ref.

这篇关于错误错误:无法设置未定义的属性"paginator"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！