2017-01-30 10 views
0

私が観測から値を抽出しようとしているが、私のサブスクリプション(コンポーネント)のコードは以下のようにある:「日付」コールバックで観察可能な未定義

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

がthis.formattedDateのにconsole.logを印刷します正しい値。ただし、サブスクリプションの外でthis.formattedDateにアクセスしようとすると、定義されません。

サービスコード:

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); 
} 

Iは、短い形式()を使用しqueryParamを介してデータを渡す同じアクションを実行してきたが、それはこの場合に差を作りません。私はこれで情報を引き出すために必要なことを見落としているようです。

私は両方を見てきました: Angular2 HTTP using observables subscribe showing data undefinedAngular 2 return data from service is not availabe after RxJs subscribeを。

私はどこに彼らの質問に答えられたのですか。私は何が欠けていますか?

+0

このデータにどのようにアクセスしようとしていますか?あなたの見解では?あなたは* ngを1つの答えに示唆されたように使用しましたか? – Alex

+1

利用可能になる前にデータにアクセスしようとしているようです。これは、observableが値を返した後でのみ利用可能です。 Observableが返ってきたと確信していますか?つまり、{{this.formattedDate = dates'}は、アクセスしようとする前に呼び出されていますか?それはあなたの問題で私の最高の推測です。 – VSO

+0

これは、技術的には、非同期関数から値を返す方法の欺瞞です。 –

答えて

1

それは「外」であるが、それは呼び出しの後だ場合は、Observableこれが予想される動作

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 
} 

を取得する場所あなたがsubscribeの外の値を取得することはできませんあなたの質問から不明です。 mapを使用し、getDisabledDateで行われたように、発信者が購読するための結果を返すか、コードをコールバックの1つに移動することができます。

+1

私は、非同期の性質は、同じメソッドで実行されるコードが、観察可能なものの前に終了することを意味すると理解しました。私は、コンストラクタへの購読を移動すると、formattedDateがngOnInitのオブザーバブルから値を受け取るための時間を残すと考えていました。私は間違っていたことが分かります。私はconsole.log(this.formattedDate)をボタンに移動し、値を表示しています。 – Chris

+1

@Chris:Angular 2 Routeがコントローラに必要なデータをあらかじめロードすることを確認します。解決策は、コントローラのロード時に準備ができていることを保証します。こちらをご覧ください:http://www.callibrity.com/blog/angular-2-route-resolvesまたはこちら:https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in -angular-2.html最初の記事は読むのが簡単です。 2番目は、アーキテクチャー層の開発者によるものです(深度が深く、従うのが難しい)。 – VSO

+0

「外側」について何を意味するかを明確にする:.subscribe();の外側で 'this.formattedDate'の値にアクセスする。すなわち、値はオブザーバブルにローカルにアクセスできるだけでなく、受信変数のスコープにもアクセスできます。 – Chris