Angular 4 typescript从promise中获取数组

Question

我收到了从返回的承诺中存储数据的麻烦.

为了确保确实返回了我想要的值,我将其记录下来.

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);
}

谢谢

Answer 1

我猜想问题在于您的日志记录,而不是您的数据访问.

如果您使用的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);
}

我们想要处理数据的任何代码都在订阅中.

希望这可以帮助.