Javascript 使用Angular 2 Http从REST Web服务获取数据

我正在尝试使用Angular 2 Http从REST web服务获取数据

我首先将服务注入调用它的客户端组件类的构造函数中：

constructor (private _myService: MyService,
             private route: ActivatedRoute,
             private router: Router) {}

我添加了一个getData（）方法，该方法调用MyService的一个方法从web服务获取数据：

getData(myArg: string) {
    this._myService.fetchData(myArg)
      .subscribe(data => this.jsonData = JSON.stringify(data),
        error => alert(error),
        () => console.log("Finished")
      );

    console.log('response ' + this.jsonData);

我在客户端组件类的ngOnInit方法中调用getData（）方法（我正确导入并实现了OnInit接口）：

以下是MyService服务：

import { Injectable } from '@angular/core';
    import { Http, Response } from '@angular/http';
    import 'rxjs/add/operator/map';

    @Injectable()
    export class MyService {
        constructor (private _http: Http) {}

        fetchData(myArg: string) {
            return this._http.get("http://date.jsontest.com/").map(res => res.json());
        }
    }

当我尝试使用

console.log（'response'+this.jsonData）测试数据时，我无法获取数据

在上面的getData（）方法中，我在浏览器中得到

未定义的响应

PS:jsonData是客户端组件类的字符串属性。
由于http请求是异步的，
在您尝试将其记录到控制台时，不会设置此.jsonData
。而是将该日志放入订阅回调：

getData(myArg: string){     
    this._myService.fetchData(myArg)
             .subscribe(data => { 
                            this.jsonData = JSON.stringify(data)
                            console.log(this.jsonData);
                        },
                        error => alert(error),
                        () => console.log("Finished")
    );
}

getData(myArg: string){     
    this._myService.fetchData(myArg)
             .subscribe(data => { 
                            this.jsonData = JSON.stringify(data)
                            console.log(this.jsonData);
                        },
                        error => alert(error),
                        () => console.log("Finished")
    );
}