json - 如何在 Angular 2 中调用返回单个 JSON 对象的 Web 服务？

Question

尝试从返回单个 Json 对象的 Angular 2 调用网络服务:

{
   "fullDisplayName": "test",
   "result": "SUCCESS"
}

以下是我的路线的代码片段:

服务

getJsonObject () {
    return this.http.get(this.url)
                    .map(res => <jsonObject> res.json())
                    .do(jsonObject=> console.log(jsonObject))
                    .catch(this.handleError);
}

组件

getJsonObject() {
   console.log('BEFORE')
   this.service.getJsonObject()
      .subscribe(
          jsonObject=> this.jsonObject = jsonObject,
          error =>  this.errorMessage = <any>error);
          console.log(this.jsonObject)
          console.log("AFTER")
 }

我得到的只是一个 undefined object ，但我可以在 chrome 的控制台日志中看到 JSON。有趣的是，我在调用前后都在组件中放置了一个日志，这两个日志都在找到的 JSON 显示在日志中之前显示，这让它看起来像是在 Web 服务返回数据之前以某种方式尝试映射对象。

控制台日志

 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
 BEFORE
 undefined
 AFTER
 Object {fullDisplayName: "test", result: "SUCCESS"}

非常感谢任何帮助。

Answer 1

     console.log(this.jsonObject)
     console.log("AFTER")

在对 this.url 的请求甚至发送到服务器之前执行。 Observable 是异步的，执行被排入事件队列，当响应到达时，您传递给 subscribe(...) 的回调将被执行。

这是你实际需要做的:

getJsonObject() {
   console.log('BEFORE')
   this.service.getJsonObject()
      .subscribe(
          jsonObject=> {
              this.jsonObject = jsonObject,
              console.log(this.jsonObject)
              console.log("AFTER")
          },
          error =>  this.errorMessage = <any>error);
 }