I have a function that I execute in my component's ngOnInit lifecycle hook. This function calls a service to fetch data and populate an array. Once that array is filled, I then call another service method using the data from the first array to populate a second array.
The issue I'm facing is that when the page renders, the second array appears to still be empty, resulting in nothing being displayed on the screen.
Below is a simplified example of my code:
changedBookings: Booking[] = [];
currentBookings: Booking[] = [];
constructor(private bookingService: BookingService) { }
ngOnInit() {
//Retrieve all changes and apply filters
this.bookingService.getAllHistory()
.subscribe(
data => {
this.changedBookings = (data as any).results
},
err => {
console.log(err);
},
() => {
this.getCurrentBookings();
})
}
getCurrentBookings() {
for(let i of this.changedBookings) {
this.bookingService.getRoomBooking(i.date,i.level,i.room)
.subscribe(
data => this.currentBookings.push((data as any).results),
err => console.log(err),
() => {
//The console logs show data being added to the array
console.log(this.currentBookings);
}
)
}
}<div class="row">
<div *ngFor="let booking of changedBookings">
{{booking.date}}
</div>
<!--This section doesn't display anything-->
<div *ngFor="let booking of currentBookings">
{{booking.date}}
</div>
</div>I am looking for a solution that allows me to successfully use both arrays in my HTML template.