Scott Mackenzie Scott Mackenzie - 3 years ago 60
TypeScript Question

Array undefined in Typescript but works in HTML

I have a component that populates an Object array in its

ngInit()
method from a service which I then use the contents of in my HTML template.

My problem is I can use this data fine in the HTML template but if I try to use this same Object array in my TypeScript file I will get an undefined error.

Below is a simplified code example of my problem:



@Component({
selector: 'booking',
template: `
<div *ngFor="let r of requestedBookings">
<label>Requested on {{r.created | date: 'd MMM H:mm'}}</label>
</div>
`
})

export default class BookingComponent {

requestedBookings: Object[];

constructor(private bookingService: BookingService) {

}

ngOnInit() {

this.getRequestLog();

// Cannot read property 'length' of undefined error
// console.log(this.requestedBookings.length);

}


private getRequestLog(): void {

this.bookingService.getRoomRequestBooking(1,1,1)
.subscribe(data => this.requestedBookings = (data as any))
.results, err => {
console.log(err);
}

}





Why is it in the above example I can use the requestedBookings array as expected in the HTML template but inside the TypeScript file I receive undefined errors?

Answer Source

IMHO the correct way should be something like:

ngOnInit() {  
this.getRequestLog();
}

private getRequestLog(): void {
  this.bookingService.getRoomRequestBooking(1,1,1)
    .subscribe((data)=>{
     this.requestedBookings = data;
     console.log(this.requestedBookings.length);
    })
    .results, err => {
      console.log(err);
    }
}

As explained before, the call to getRoomRequestBooking is async, so you should not expect it will finish before calling the console.log. Instead, you should use the requestedBookings.length value in a place where you do know it will exist. Hope it helps!!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download