我在存储返回的 promise 中的数据时遇到问题。
为了确保确实返回了我想要的值,我这样记录它。
private fetchData() {
this._movieFranchiseService.getHighestGrossingFilmFranchises()
.then((franchises: FilmFranchise[]) => {
console.log(franchises)
});
}
但现在我想存储它。
private franchises: FilmFranchise[] = [];
private fetchData() {
this._movieFranchiseService.getHighestGrossingFilmFranchises()
.then((franchises: FilmFranchise[]) => this.franchises = franchises);
console.log(this.franchises);
}
我用这段代码得到的只是一个空数组。那么,为什么 this.franchises
没有正确分配?
附加模型、模拟和服务
export class FilmFranchise {
id: number;
name: string;
revenue: number; // Revenue in billion U.S dollars
}
export var FRANCHISES: FilmFranchise[] = [
{ id: 1, name: 'Marvel Cinematic Universe', revenue: 13.47 },
{ id: 2, name: 'J.K Rowling\'s Wizarding World', revenue: 8.54 },
{ id: 3, name: 'Star Wars', revenue: 7.52 },
{ id: 4, name: 'James Bond', revenue: 7.04 },
{ id: 5, name: 'Middle Earth', revenue: 5.88 }
];
public getHighestGrossingFilmFranchises() {
return Promise.resolve(FRANCHISES);
}
谢谢
最佳答案
我猜问题出在您的日志记录上,而不是您的数据访问。
如果您使用的 get 方法是异步的,您不能在调用后立即记录它的值。您必须在回调中完成。
像这样:
private fetchData() {
this._movieFranchiseService.getHighestGrossingFilmFranchises()
.then((franchises: FilmFranchise[]) => {
this.franchises = franchises);
console.log(this.franchises);
}
}
我通过添加另一组大括号将单行回调更改为多行回调。现在这两行都在回调中。
编辑
关于管理来自 Http 调用的数据的一些事情。
如你所知,Http是异步的,所以你必须等待响应中返回数据才能使用它。
Angular 最常使用 Observables(不是 promises)来处理 http 数据。
服务将检索数据并返回 Observable。
任何需要处理数据的组件都将订阅 Observable。然后,该组件可以在提供给订阅方法的函数中使用该数据。
例如,这是一个简单的“电影”服务:
getMovies(): Observable<IMovie[]> {
return this.http.get<IMovie[]>(this.moviesUrl);
}
它返回一个可观察对象。
这是一个使用该服务的简单组件:
ngOnInit(): void {
this.movieService.getMovies()
.subscribe(
(movies: IMovie[]) => {
this.movies = movies;
this.filteredMovies = this.performFilter(this.listFilter);
},
(error: any) => this.errorMessage = <any>error);
}
我们想要处理数据的任何代码都在订阅中。
希望这对您有所帮助。
关于Angular 4 typescript 从 promise 中获取数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49247023/