Не удается прочитать свойство 'length' с нулевым значением при использовании MatPaginator

Question

Я получаю эту ошибку:

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>

Буду очень признателен за вашу помощь.

Answer 1

Я подозреваю, что это проблема сферы действия. Попробуйте добавить это в класс, а не функцию. Вы ссылаетесь на this.datasource, но устанавливаете его как новый в функции, поэтому я предполагаю, что вы просто объявляете var в классе. Я видел эту ошибку много раз, и это когда мой источник данных не получает данные, но вы, кажется, указываете, что ваша таблица работает с данными.

Пример Stackblitz

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