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

我有一个提供程序从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]); 
    }); 
    }

我得到的错误是：

无法读取的不确定

属性 '然后'

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

来源

2017-10-18 Krowar

一旦数据被接收，检索数据和执行操作的“最佳实践”就是使用Observable而不是承诺。事情是这样的：

在服务：

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

来源

2017-10-18 21:41:10 DeborahK

谢谢，虽然我有一个问题。什么是this.handleError？它会在我的代码中产生问题，我不知道如何解决它。另外为什么你有这个.http.get ？而不是简单的http.get？非常感谢你 – Krowar

我使用的是属于Angular 4.3的新HttpClient。如果您使用的是旧版本的Angular，那么您需要较旧的语法，而不使用通用参数''。 'handleError'只是一个处理任何错误的方法。 – DeborahK

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

回答

相关问题