2017-01-30 2 views
0

Ich versuche, die Werte aus einer beobachtbaren, mein Abonnement (Komponente) Code zu extrahieren, ist wie folgt:beobachtbare undefiniert

this.checkoutService.getDisabledDate().subscribe 
(dates=>{this.formattedDate=dates}, 
(error:any)=>{console.log(error)}); 

In der Callback ‚Termine‘ ein console.log von this.formattedDate druckt die korrekte Werte. Der Zugriff auf this.formattedDate außerhalb des Abonnements ist jedoch nicht definiert.

den Servicecode:

getDisabledDate():Observable<any>{ 
    let headers = new Headers({'Content-Type': 'application/json' }); 
    let options = new RequestOptions({headers:headers}); 
    let userRequest={action_id:0}; 
    let disabledDate={}; 

    return this.http 
     .post(this.deliveryUrl,userRequest,options) 
     .map((r:Response)=>r.json()) 
     .catch(this.handleError); 
} 

Ich habe die gleiche Aktion Übergeben von Daten über einen queryParam mit Kurzform() durchgeführt, und es machte keinen Unterschied in diesem Fall. Ich scheine zu übersehen, was notwendig ist, um die Information mit diesem herauszuziehen.

Ich habe an beiden sah: Angular2 HTTP using observables subscribe showing data undefined und Angular 2 return data from service is not availabe after RxJs subscribe.

Welche ich bin bestanden, wo ihre Fragen beantwortet wurden. Was vermisse ich?

+0

Wie versuchen Sie, auf diese Daten zuzugreifen? Ihrer Meinung nach? Haben Sie * ngIf wie in einer Antwort vorgeschlagen verwendet, wenn das der Fall ist? – Alex

+1

Es klingt, als ob Sie versuchen, auf die Daten zuzugreifen, bevor sie verfügbar sind. Es ist erst verfügbar, nachdem das Observable einen Wert dafür zurückgegeben hat. Sind Sie sicher, dass das Observable zurückkehrt, d. H. "{This.formatdate = dates" wird aufgerufen, bevor Sie versuchen, darauf zuzugreifen? Das ist meine beste Schätzung für Ihr Problem. – VSO

+0

Dies ist technisch ein Trick, wie man einen Wert von einer asynchronen Funktion zurückgibt. –

Antwort

1

Es ist unklar, aus Ihrer Frage, wo „draußen“ ist, aber wenn es nach dem Aufruf ist, wo Sie die Observable bekommen dann dieses Verhalten erwartet wird

someMethod() { 
    this.checkoutService.getDisabledDate() 
    .subscribe(
    // anything here is executed sometimes later when the response from the server arrives 
    dates=>{ 
     this.formattedDate=dates; 
     // code that depends on the result goes here 
    }, 
    (error:any)=>{console.log(error)} 
); 
    // this is executed first 
} 

Sie können den Wert nicht außerhalb von subscribe bekommen. Sie können map verwenden und das Ergebnis für den Anrufer zum Abonnieren zurückgeben, wie in getDisabledDate oder Sie verschieben den Code zu einem der Rückrufe.

+1

Ich habe verstanden, dass die asynchrone Natur bedeuten würde, dass Code, der in derselben Methode ausgeführt wird, vor der Observablen enden würde. Ich hatte gedacht, dass das Verschieben des Subskripts für den Konstruktor Zeit für das Formatieredatum belassen würde, um die Werte von dem Observable in ngOnInit zu erhalten. Stellt sich heraus, ich habe mich geirrt. Ich habe eine console.log (this.formattedDate) auf eine Schaltfläche verschoben, und siehe da, die Werte wurden gedruckt. – Chris

+1

@Chris: Sie möchten sehen, dass Angular 2 Route die Daten, die Sie in Ihrem Controller benötigen, vorab lädt. Stellt sicher, dass es für Sie bereitsteht, wenn ein Controller geladen wird. Siehe hier: http://www.callibrity.com/blog/angular-2-route-resolves oder hier: https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in -angular-2.html Der erste Artikel ist einfacher zu lesen. Die zweite ist von Architekt-Tier-Entwicklern (mehr Tiefe, schwerer zu folgen). – VSO

+0

Um zu verdeutlichen, was ich von "außerhalb" meine: Zugriff auf die Werte von "this.formattedDate" außerhalb der .subscribe(); dh. Die Werte sind nicht nur für das Beobachtbare, sondern auch für den Umfang der Empfangsvariablen lokal zugänglich. – Chris