订阅可观察到的是返回undefined

Question

所以我想订阅简单的服务，从本地JSON文件返回数据。

我已成功地获得服务的工作，我可以登录它的功能，但是当我订阅服务在角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方法返回可观察到的。不是在这个点的数据。
3. 该组件调用subscribe对返回的观测。
4. 该get请求被提交给服务器进行处理。
5. 该ngOnInit方法完成。

由于数据尚未返回subscribe后这里的任何代码不能访问movies属性。

接收HTTP响应

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

6. 影片是返回到服务。
7. 如果这个过程是成功的，执行第一回调函数。
8. 本地电影属性被分配到从服务返回的电影。只有在这里，电影属性最终设定。

试图访问在错误步骤＃8的结果之前电影属性。

我们可以在这里访问的价值？ NO

要解决这个问题：

Answer 2

你有同步和异步功能之间的问题。找你的问题是：getDateFromService是syncronous和里面的内容是异步。所以当ngOnInit函数调用getDataFromService，找你的代码不等待异步任务。找你getDataFromService需要返回观察员或需要实现你的API返回（你需要选择）。

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

public getDataFromService() {
  return this._api.getData();
}

Answer 3

objResponse;
this.service.getData().subscribe((result: any)=> { 
this.objResponse=result;
}

返回的东西不会要求

Answer 4

相反，在ngOnInit（）方法记录像你一样的

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

记录该订阅（）方法，作为内

export class AppComponent {
  public data: any
  public informationData;

  constructor(private _api: ApiService) {}

  public ngOnInit(): void {
    this.getDataFromService(); //don't log here, logging here will return undefined
  }

  public getDataFromService() {
    this._api.getData().subscribe(response => {
      this.informationData = response;
      console.log(this.informationData); //log here, like this
      return this.informationData;
    });
  }
}

Answer 5

试着用：

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

要么

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