Reputation: 21
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>
Upvotes: 1
Views: 580
Reputation: 34603
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>
Upvotes: 1