0

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?

Sisky
  • 563
  • 9
  • 26
  • 6
    Because `getRequestLog` is asynchronous, and thus `this.requestedBookings.length` is running before the bookings are returned. – Rob Jul 26 '17 at 02:32
  • @Rob is correct. `requestedBookings: Object[];` is not an instantiation, it's a type declaration and is ambient. When `ngOnInit` runs, your variable is not instantiated. `requestedBookings: Object[] = [];` would allow the console log to execute. – muiiu Jul 26 '17 at 02:35
  • So how can I ensure that getRequestLog() has completed before I access the array? – Sisky Jul 26 '17 at 02:36
  • @ScottMackenzie Depends what you mean by completed, since you're subscribing to a stream, it may be *constantly* changing. You'll want to return the observable from `getRequestLog` and then subscribe to it to do your work. Alternatively, you could collapse the observable to a promise, return the promise, and then write something like `getRequestLog().then(f => ...)` – Rob Jul 26 '17 at 02:37
  • Thanks for your help identifying the asynchronous problem. I added an answer showing how I fixed my issue. – Sisky Jul 26 '17 at 04:50
  • Possible duplicate of [How do I return the response from an Observable/http/async call in angular2?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) – AT82 Jul 26 '17 at 06:54

2 Answers2

2

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!!

pinkfloyd
  • 255
  • 4
  • 13
0

I fixed this issue by using this constructor from the subscribe method. the complete parameter event happens after successful completion.

  subscribe(next?: (value: T) => void, 
            error?: (error: any) => void, 
            complete?: () => void): Subscription;

Code is as follows:

ngOnInit() {  
  this.getRequestLog();
}

private getRequestLog() {

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

}
Sisky
  • 563
  • 9
  • 26