javascript - 订阅 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. 组件在返回的 Observable 上调用 subscribe。
4. get请求被提交给服务器处理。
5. ngOnInit 方法已完成。

subscribe 之后的任何代码都无法访问 movies 属性，因为数据尚未返回。

接收 Http 响应

在稍后的某个时间点......

1. 电影返回给服务。
2. 如果处理成功，则执行第一个回调函数。
3. 本地电影属性分配给从服务返回的电影。只有在这里，电影属性才最终被设置。

在第 8 步之前尝试访问电影属性会导致错误。

我们可以在这里访问值吗？否

修复它: