http postメソッドからの戻り値をAngular2で取得する方法は？

Question

Web APIにhttpポストメソッドリクエストを行う必要がある、つまりユーザーが入力したデータを保存する必要があります。 Web APIは結果としていくつかの値を返し、この結果は一部のUIロジックに使用されます。

http投稿を同期的に作成しようとしましたが、期待通りに正しく動作しません。

Angular2コンポーネントは、データを保存するには、このサービスを呼び出す： -

public SaveCubeReport(userName: any, cubeReport: CubeReportViewModel, APIServiceURL: any) 
    { 
     var result = this.SaveData(userName, cubeReport, APIServiceURL).subscribe(
      data => { 
       console.log(data); 
      }); 

     console.log(result); 
} 

HTTP POSTをメソッドの呼び出しは次のとおりです。 - angular2モーダルポップアップが呼び出される

SaveData(userName: any, cubeReport: CubeReportViewModel, APIServiceURL: any) 
{ 
    var temp = this._http.post(APIServiceURL, JSON.stringify(cubeReport), { headers: ContentHeaders }) 
     .map((res: Response) => res.json()) 
     .do(() => { 
      console.log('request finished'); 
     }); 
    return res; 
} 

親コンポーネント。サービスコールが

RefreshReportListDropdown(savedReportName: any) 
{ 
    this._ClientAPIService.GetCubeReportsListByCubeWithEmptyRecord(this._SessionService.LoggedInUser, this._SessionService.SelectedApplication, this.cubeName, this._SessionService.ClientAPIServiceURL) 
     .subscribe(
     (res) => { 
      this.cubeReportList = res; //This result should contain all records including the recently saved data from the popup 
      .... 
     } 
    ); 
} 

すべての私の要求作られ、そこから

var dialog = this.modal.open(SaveCubeReport, overlayConfigFactory(
{ 
    ReportName: this.ReportItem.rpt_name, 
    ReportDescription: this.ReportItem.rpt_description, 
    Application: this.ReportItem.application_name, 
    Owner: this.ReportItem.owner, 
    CubeId: this.CubeId, 
    ReportId: this.ReportItem.rpt_id, 
    ReportJson: JSON.stringify(this.getState()) 
}, BSModalContext)); 

dialog 
.then((d) => d.result) 
.then((r) => { 
    // success 
    console.log("Dialog ended with success: ", r); 
    this.RefreshReportListDropdown(r); 
}, (error) => { 
    // failure 
    console.log("Dialog ended with failure: ", error); 
}); 

機能はすなわち、それは戻り値を取得するために待機しない非同期リクエスト作られています。 ここで間違いはありますか？

Answer 1

SaveDataメソッドでhttp.post呼び出しの結果を返します。

SaveData(userName: any, cubeReport: CubeReportViewModel, APIServiceURL: any) 
{ 
    return this._http.post(APIServiceURL, JSON.stringify(cubeReport), { headers: ContentHeaders }) 
     .map((res: Response) => res.json()) 
     .do(() => { 
      console.log('request finished'); 
     }); 
} 

この後、コンシューマコンポーネントのsubscribeが正しく動作します。

Answer 2

loginservice.ts：

checklogin(user) { 
    return this.http.post("API_URL",user).map(resp => resp.json()); 
    } 

logincomponent.ts：

localvariable={} // or whatever u want 

    customFunction() { 
    this.loginservice.checklogin(this.user).subscribe (data => 
    {this.localvariable=data;}) 

    // results is assigned now to this.localvariable 
    //write your logic etc ... 
    }