如何仅在可用时使用提供者发送的数据?
问题描述:
我有一个提供程序从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]);
});
}
我得到的错误是:
属性 '然后'无法读取的不确定
我应该如何正确地做到这一点?
答
一旦数据被接收,检索数据和执行操作的“最佳实践”就是使用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
谢谢,虽然我有一个问题。什么是this.handleError?它会在我的代码中产生问题,我不知道如何解决它。另外为什么你有这个.http.get?而不是简单的http.get?非常感谢你 –
Krowar
我使用的是属于Angular 4.3的新HttpClient。如果您使用的是旧版本的Angular,那么您需要较旧的语法,而不使用通用参数''。 'handleError'只是一个处理任何错误的方法。 –
DeborahK