Wie führe ich eine Operation nach Abschluss der Aktion aus, die ausgeführt werden soll, nachdem die Observable abgeschlossen ist?

Question

Ich muss eine Aktion auf das Ergebnis einer Observablen innerhalb einer Observablen durchführen.

Component

checkIn(room: Room) 
{ 
    this.roomService.checkIn(room.number).subscribe(
     response => { 
      this.checkInResponse = response; 
      // other codes 

      this.getRooms(); 

      // Perform the following line of code after getRooms() is complete, i.e. this.rooms has been reloaded. Right now, it executes instantaneously, i.e. before this.getRooms() is complete. 
      this.setRoom = this.roomFromNumber(room.number); 
     }, 
     error => { 
      console.log(error); 
     } 
    ); 
} 

getRooms() { 
    this.roomService.getRooms().subscribe(
     response => { 
     this.rooms = response; 
     }, 
     error => { 
     console.log(error); 
     } 
    ); 
} 

Service

getRooms(): Observable <any> { 
    return this.http.get('http://localhost:8000/api/rooms?token=' + this.token).map(
     (response: Response) => { 
      return response.json().rooms; 
     }); 
} 

checkIn(roomNumber: number) { 
    return this.http.post('http://localhost:8000/api/room/checkIn?token=' + this.token, 
    { 
     number: roomNumber 
    }, 
    { 
     headers: new Headers({ 
       'Content-Type' : 'application/json', 
       'X-Requested-With' : 'XMLHttpRequest', 
     }) 
    }); 
} 

Das Problem in dem obigen Code ist, dass die this.setRoom = this.roomFromNumber(room.number); vor this.getRooms() ausführt. Ich muss die folgende Codezeile ausführen, nachdem getRooms() abgeschlossen ist, d. H. This.rooms wurde neu geladen.

Ich könnte einfach Folgendes tun, was zwei Sekunden wartet, bevor der Code ausgeführt wird, was gut funktioniert, wenn das Observable innerhalb von zwei Sekunden passiert; was definitiv nicht der richtige Ansatz ist.

setTimeout(() => this.setRoom = this.roomFromNumber(room.number), 2000); 

Answer 1

Sie können dies tun.

checkIn(room: Room) 
{ 
    this.roomService.checkIn(room.number).subscribe(
     response => { 
      this.checkInResponse = response; 
      // other codes 

      this.getRooms(() => { this.setRoom = this.roomFromNumber(room.number); });. 

     }, 
     error => { 
      console.log(error); 
     } 
    ); 
} 

getRooms(completeAction: any) { 
    this.roomService.getRooms().subscribe(
     response => { 
     this.rooms = response; 
     }, 
     error => { 
     console.log(error); 
     }, 
    () => { completeAction(); } 
    ); 
} 

Answer 2

checkIn(room: Room) 
{ 
    this.roomService.checkIn(room.number).subscribe(
     (response) => { 
      this.checkInResponse = response; 
      // other codes 

      this.getRooms().subscribe(
      (data) => { 
       // executes after getRooms() has completed execution 
       this.setRoom = this.roomFromNumber(room.number); 
      }, 
      (error) => { 
       console.log(error); 
      }); 
     }, 
     (error) => { 
      console.log(error); 
     } 
    ); 
} 

getRooms() { 
    return this.roomService.getRooms().map(
      (response) => { 
       return response 
      } 
      ).catch((error) => { 
       return Observable.throw(error) 
      }); 
}