Verzögerter Service Anruf wird nicht angezeigt

Question

Ich habe einen Service, den ich in meiner ngOnInit Methode aufrufen. Was mein Array zurückgibt und füllt. Ich rufe dann vollständig eine andere Dienstmethode auf, die die Ergebnisse von dem ersten Array verwendet, das wiederum ein zweites Array füllt.

Mein Problem ist, dass zum Zeitpunkt der Wiedergabe meiner zweiten Array nehme ich an, ist noch leer, so wird es nie auf dem Bildschirm rendern.

Hier ist ein vereinfachtes Beispiel:

changedBookings: Booking[] = []; 
 
currentBookings: Booking[] = []; 
 

 
constructor(private bookingService: BookingService) { } 
 

 
    ngOnInit() { 
 

 
    //Get all changes then filter 
 
    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), 
 
       () => { 
 
        //shows this array being filled 
 
        console.log(this.currentBookings); 
 
        } 
 
      ) 
 
     } 
 
    }

<div class="row"> 
 

 
    <div *ngFor="let booking of changedBookings"> 
 
    {{booking.date}} 
 
    </div> 
 

 
    <!--This one never shows--> 
 
    <div *ngFor="let booking of currentBookings"> 
 
    {{booking.date}} 
 
    </div> 
 
    
 
</div>

Wie kann ich diesen Code zu schreiben, so kann ich beide Arrays in meinem HTML-Code verwenden.

Answer 1

Einfache Lösung am Ende. Aber jemand anderes kann sich verfangen.

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), 
      () => { 
       //shows this array being filled 
       console.log(this.currentBookings); 
       } 
     ) 
    } 

}

Da dies durch Looping war in der Tat bei jeder Schleife ein Array von Objekten schieben, so dass Sie mit so etwas wie so am Ende:

[ [{}],[{}] ] 

So offensichtlich

<div *ngFor="let booking of currentBookings"> 
    {{booking.date}} 
</div> 

wäre undefiniert. Einfache Lösung ohne Änderung eines anderen Codes ist wie folgt:

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