angular - Delayed service call not showing on view -

i have service call in ngoninit method. returns , fills array. on complete call service method using results first array in turn fills second array.

my problem @ time of rendering second array assume still empty never render on screen.

here simplified example:

changedbookings: booking[] = [];  currentbookings: booking[] = [];    constructor(private bookingservice: bookingservice) { }      ngoninit() {        //get changes filter      this.bookingservice.getallhistory()          .subscribe(              data => {                  this.changedbookings = (data any).results              },              err => {                  console.log(err);              },              () => {                  this.getcurrentbookings();              })    }      getcurrentbookings() {        for(let of this.changedbookings) {            this.bookingservice.getroombooking(i.date,i.level,i.room)                .subscribe(                    data => this.currentbookings.push((data any).results),                    err => console.log(err),                    () => {                      //shows array being filled                      console.log(this.currentbookings);                    }                )        }    }

<div class="row">      <div *ngfor="let booking of changedbookings">      {{booking.date}}    </div>      <!--this 1 never shows-->    <div *ngfor="let booking of currentbookings">      {{booking.date}}    </div>      </div>

how can write code can use both arrays in html code.

easy fix in end. else may caught up.

getcurrentbookings() {   for(let of this.changedbookings) {       this.bookingservice.getroombooking(i.date,i.level,i.room)           .subscribe(               data => this.currentbookings.push((data any).results),               err => console.log(err),               () => {                 //shows array being filled                 console.log(this.currentbookings);               }           )   } 

}

as looping through in fact pushing array of objects @ each loop end so:

[ [{}],[{}] ] 

so

<div *ngfor="let booking of currentbookings">   {{booking.date}} </div> 

would undefined. easy fix without changing other code follows:

<div *ngfor="let booking of currentbookings">   {{booking[0].date}} </div>