ERROR TypeError: Cannot convert undefined or null to object ejs-treegrid

Question

In Angular application, I am unable to read from the service I created using [dataSource].

ERROR TypeError: Cannot convert undefined or null to object ERROR TypeError: Cannot read property 'getService' of undefined

component.ts

import { Component, OnInit } from '@angular/core';
import { RailroadAgreementService } from '../../services/railroad-agreement.service';
import { RRA_ID } from '../../models/RRA_ID';

@Component({
  selector: 'app-railroad-agreements',
  templateUrl: './railroad-agreements.component.html',
  styleUrls: ['./railroad-agreements.component.css'],
})

export class RailroadAgreementsComponent implements OnInit {

  public data: RRA_ID[];

  constructor(private railroadAgreementService: RailroadAgreementService) {}

  ngOnInit(): void {
    this.railroadAgreementService.getRRAId().subscribe((data) => {
      this.data = data;
      console.log(this.data);
    })

  }

}

component.html

<ejs-treegrid [dataSource]="data">

</ejs-treegrid>

Try initializing the data array to an empty array to see if that removes the error. Like so: public data: RRA_ID[] = []; — R. Richards

Brandon Brandon · Accepted Answer · 2019-12-03T15:40:41

If the service method is returning a "cold" observable, it's value will initially be null, and your component is complaining that it can't access a property that it's expecting because it received null instead of an object, array, etc.

This is because the Observable code is running asynchronously.

To counter this, you can force the component to wait until the data property is truthy (not null, undefined, false an empty string, etc) to render:

<ejs-treegrid *ngIf="data" [dataSource]="data"></ejs-treegrid>

ERROR TypeError: Cannot convert undefined or null to object ejs-treegrid

1 Answers