Angular2 HTTP観測可能

Question

私が観察できるHTTP

SaveWorkRequest(workRequest: any) { 
    let headers = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON 
    let options = new RequestOptions({ headers: headers }); // Create a request option 
    let url = 'deployment/SaveWorkRequest'; 
    let dto = { 'workResponse': workRequest }; 

    // post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>; 
    return this.http.post(GlobalVariables.SITE_ROOT + url, dto, options) 
     //.toPromise() 
     //.then(this.extractData) //...and calling .json() on the response to return data 
     .map(this.extractData) 
     .catch(this.handleError); 
} 

// 
private extractData(res: Response) { 
    let body = res.json(); 
    console.log(body); 
    return body || {}; 
} 

そして、それを呼び出すコンポーネントでこのコードを呼び出して、以下の方法を持っている

 let response = this.workRequestService.SaveWorkRequest(this.workRequest) 
     .subscribe(
      hero => this.message = hero, 
      error => this.errorMessage = <any>error); 



    console.log(this.message); 

問題があり、コンポーネントは戻りのコードの前にサービスメソッド。したがって、console.log（this.message）は未定義です。それは私が推測するタイミングの問題でなければならない？

Answer 1

はい、これはタイミングの問題です。 console.log(this.message);ステートメントgetは、応答がHTTPリクエストから到着する前に実行されます。 subscribe内に次のようにlog文を記述する必要があります。

let response = this.workRequestService.SaveWorkRequest(this.workRequest) 
    .subscribe(
     hero => 
     { 
      this.message = hero; 
      console.log(this.message); 
     }, 
     error => this.errorMessage = <any>error); 

Answer 2

はこれを試してみてください：

ngOnInit() { 
    this.getMessage().subscribe(_ => { 
     console.log(this.message) 
    }); 
} 

public getMessage() { 
    return this.workRequestService.SaveWorkRequest(this.workRequest) 
    .map(hero => this.message = hero,error => this.errorMessage = <any>error); 

Answer 3

Observableは非同期です。 console.log(this.message);を試してみると、購読価値があるまで未定義の値が得られます。

エラーが出る可能性がある場合は、{{ this.message?.some_property }}をテンプレートに追加してください。