Wie wird eine Popup-Nachricht basierend auf der Observable-Eigenschaft angezeigt?

Question

Ich habe eine Popup-Nachricht, die ich präsentieren möchte, wenn meine Observable geliefert wird, ist eine Zeichenfolge beobachtbar.

dies ist meine Funktion, die Zeichenfolge beobachtbaren zurückgibt:

public sendUpdate() { 
this._mtService.sendCurrentUpdate(this.myList).subscribe(
res => this.messageToDisplay = res, 
error => this.messageToDisplay = error 
); 
} 

dies meine Funktion ist, dass ich die Pop präsentieren mit der entsprechenden Nachricht auf:

public showMessageDialog(message) { 
    let config = new MdDialogConfig() 
     .title('Message:') 
     .textContent(message) 
     .ok('Got it'); 

    this.dialog.open(MdDialogBasic, this.element, config); 
    } 

jetzt, ich will, wo und wissen, Wie soll ich diese Nachricht anrufen, um messageToDisplay zu präsentieren, wenn das Observable bereit ist.

I t wäre noch besser, wenn Sie mir sagen, wie ich etwas loader zeigen kann, während die beobachtbaren warten die Zeichenfolge zu erhalten und dann, wenn sein dort es präsentiert ...

Ich habe versucht, dies zu tun:

public sendUpdate() { 
    this._mtService.sendCurrentUpdate(this.myList).subscribe(
    res => this.messageToDisplay = res, 
    error => this.messageToDisplay = error 
    ); 
    this.showMessageDialog(this.messageToDisplay); 
    } 

aber was hier passiert, ist, dass das erste Mal, dass ich auf Update klicken i ein leeres Pop-up zu sehen, und wenn ich darauf klicke wieder sehe ich das Pop-up mit der Nachricht, seine offensichtlich, dass es geschieht, weil Die Saite ist noch nicht zurückgekommen, aber wie komme ich darüber hinweg?

danke!

Answer 1

Die Funktionen, die Sie subscribe() passieren wird später/asynchron aufgerufen, daher müssen Sie showMessageDialog() später auch nennen:

public sendUpdate() { 
    this.showLoader(); 
    this._mtService.sendCurrentUpdate(this.myList).subscribe(
    res => { this.stopLoader(); this.showMessageDialog(res); }, 
    error => { this.stopLoader(); this.showMessageDialog(error); } 
    ); 
}