订阅observable返回undefined

Question

所以我试图订阅一个从本地JSON文件返回数据的简单服务.

我已经设法使服务工作,我可以在函数中注销它,但是当我在angular 2组件中订阅服务时,它总是未定义的.我不知道为什么？任何帮助将非常感激.

API服务

export class ApiService {
   public data: any;

   constructor(private _http: Http) {
   }

   getData(): any {
       return this._http.get('api.json').map((response: Response) => { 
       console.log('in response', response.json()); //This logs the Object
       this.data = response.json();
       return this.data;
   })
   .catch(this.handleError);
   }
}

零件

export class AppComponent {
   public data: any
   public informationData;

   constructor(private _api: ApiService) {}

   public ngOnInit(): void {
      console.log(this.getDataFromService()); // This return undefined
   }

   public getDataFromService() {
      this._api.getData().subscribe(response => {
          this.informationData = response;
          return this.informationData;
      });
   }
}

Answer 1

也许有些图片有帮助？

这里的数字表示操作的顺序.

发送Http请求

1. 组件已初始化并调用movieService的getMovies方法.
2. movieService getMovies方法返回一个Observable.不是此时的数据.
3. 该组件调用subscribe返回的Observable.
4. 该get请求被提交给服务器进行处理.
5. 该ngOnInit方法已完成.

此后的任何代码subscribe都无法访问该movies属性,因为尚未返回数据.

收到Http响应

在某个晚些时候......

6. 电影将返回服务.
7. 如果进程成功,则执行第一个回调函数.
8. 本地电影属性被分配给从服务返回的电影.只有在这里才能最终设置电影属性.

在步骤#8之前尝试访问电影属性会导致错误.

我们可以在这里访问这个值吗？没有

要解决这个问题:

Answer 2

尝试使用：

getData(): any {
       return this._http.get('api.json');
}

或者

   getData(): any {
           return this._http.get('api.json').map((response: Response) => { 
    response.json();
})