Question

我有一个从JSON读取数据的提供程序，我希望它将数据发送到页面。为了确保数据很好地发送到UI，我有一个console.log，它应该显示数组的第一个元素，但问题是我不知道如何只调用此console.log一次信息已被提供商检索并传递。当然，目的不是使用console.log，而是在提供者通过数据后对数据进行实际处理。

提供者：

getWorldCities(){
    if (this.worldCities) {
  // already loaded data
  return Promise.resolve(this.worldCities);
}
    this.http.get('../assets/city.list.json')
      .map(res => res.json()).subscribe(data => {
        console.log(data.status);
        console.log(data);
        console.log(data.headers);
        this.worldCities = data;
        return Promise.resolve(this.worldCities);
      },
      err => console.log(err),
      () => console.log('yay')
    )
  }

}

在我的页面中：

  ionViewDidLoad() {
    console.log('ionViewDidLoad ChooseCity');
    console.log(this.worldCities);
    this.AppCitiesProvider.getWorldCities().then(data => {
      this.worldCities = data;
      console.log(this.worldCities[0]);
    });
  }

我得到的错误是：

无法读取属性＆＃39;然后＆＃39;未定义的

我该如何正确地做到这一点？

Answer 1

收到数据后检索数据和执行操作的“最佳实践”是使用Observable而不是promise。像这样：

在服务中：

getMovies(): Observable<IMovie[]> {
    return this.http.get<IMovie[]>(this.moviesUrl)
        .do(data => console.log(JSON.stringify(data)))
        .catch(this.handleError);
}

handleError(error) {
  // Your error handling here.
  console.error(error);
}

在组件中：

ngOnInit(): void {
    this.movieService.getMovies()
        .subscribe(
            (movies: IMovie[]) => { 
                this.movies = movies;
                this.filteredMovies = this.performFilter(this.listFilter);
            },
            (error: any) => this.errorMessage = <any>error);
}

订阅的第一个回调函数中的任何代码只会在检索数据后执行。

有关详细信息（和图片！）Subscribe to observable is returning undefined

，请参阅此处

如何仅在可用时使用提供商发送的数据？

1 个答案: