使用MatPaginator

时间:2018-06-30 11:13:36

标签: angular-material

我不断收到此错误:

core.js:1542 ERROR TypeError: Cannot read property 'length' of null
at MatTableDataSource.push../node_modules/@angular/material/esm5/table.es5.js.MatTableDataSource._filterData (table.es5.js:702)
at MapSubscriber.project (table.es5.js:657)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at CombineLatestSubscriber.push../node_modules/rxjs/_esm5/internal/observable/combineLatest.js.CombineLatestSubscriber.notifyNext (combineLatest.js:83)
at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:15)
at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at BehaviorSubject.push../node_modules/rxjs/_esm5/internal/BehaviorSubject.js.BehaviorSubject._subscribe (BehaviorSubject.js:22)
at BehaviorSubject.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
at BehaviorSubject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject._trySubscribe (Subject.js:89)

我从数据库提供的服务中获取数据。它运行正常。我的意思是功能正确。我可以进行分页,只是我在检查器中收到此错误。请在下面查看我的代码:

ngOnInit() {
    if (this.genParams.buildingId === null || this.genParams.buildingId === undefined) {
      this.router.navigate(['/main/viewproperties']);
    }

    this.buildingId = this.genParams.buildingId;
    this.getUnits();
  }

 public getUnits() {
    this.isLoading = true;
    this.unitService.newGetUnits(this.buildingId)
      .subscribe((data: any) => {
        this.ELEMENT_DATA = data;
        this.dataSource = new MatTableDataSource(this.ELEMENT_DATA);
        this.dataSource.paginator = this.paginator;
        this.isLoading = false;
        console.log(this.ELEMENT_DATA);
      }, err => {
        console.log(err);
      });
  }

这是在我的html中:

<mat-paginator [pageSizeOptions]="[1, 5, 10, 20]" showFirstLastButtons></mat-paginator>

非常感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

我怀疑这是一个范围问题。尝试将其添加到类而不是函数中。您引用this.datasource,但在函数中将其设置为new,所以我假设您只是在类中声明了var。我已经多次看到此错误,这是我的dataSource没有接收到数据,但是您似乎表明您的表正在处理数据。

Stackblitz example

//  For data table operations.
  private dataSource = new MatTableDataSource();
  private dataLength: number;