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

问题描述

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

对于我的项目，我需要使用来自@angular/material"的 MatTableDataSource 作为表格数据连接器，一旦我将代码更改为使用 MatTableDataSource，我就会不断收到类型错误:无法设置未定义的属性分页器".

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

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

解决方案

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

通过从 subscribe 块中的 ngAfterViewInit 移动代码来修复它.像这样:

public loadData() {this.exampleDatabase = new DataService(this.httpClient);this.exampleDatabase.getAllIssues().subscribe(data => {this.dataSource = new MatTableDataSource(data);this.dataSource.data = 数据；this.dataLength = data.length;this.dataSource.paginator = this.paginator;this.dataSource.sort = this.sort;});}

<块引用>

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

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'.

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.

There is a repro for my issue https://stackblitz.com/edit/angular-3rhawr

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

解决方案

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.

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

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

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