Angular 4 typescript 从承诺中获取数组

Question

我在存储返回的 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);
}

谢谢

Answer 1

我猜问题出在您的日志记录上，而不是您的数据访问上。

如果您使用的 get 方法是异步的，您无法在调用后立即记录它的值。您必须在回调内进行。

类似这样的：

private fetchData() {
    this._movieFranchiseService.getHighestGrossingFilmFranchises()
      .then((franchises: FilmFranchise[]) => {
          this.franchises = franchises);
          console.log(this.franchises);
       }
}

我通过添加另一组大括号将单行回调更改为多行回调。现在这两行都在回调中。

编辑

关于管理来自 Http 调用的数据的一些事情。

众所周知，Http是异步的，所以你必须等待响应中返回的数据才能使用它。

Angular 最常使用 Observables（不是 Promise）来处理 http 数据。

服务将检索数据并返回 Observable。

任何需要处理数据的组件都将订阅 Observable。然后组件可以在提供给 subscribe 方法的函数中使用该数据。

举个例子，这里有一个简单的“电影”服务：

getMovies(): Observable<IMovie[]> {
    return this.http.get<IMovie[]>(this.moviesUrl);
}

它返回一个 observable。

这是一个使用该服务的简单组件：

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

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

希望这会有所帮助。