Angular Observable订阅方法返回值无序

时间:2019-04-10 14:43:42

标签: angular rxjs observable

我正在使用PokeAPI开发Pokedex。我收到了一系列看起来像这样的口袋妖怪进化。

https://pokeapi-215911.firebaseapp.com/api/v2/evolution-chain/10

然后,我试图通过订阅另一种方法来返回模型,以返回宠物小精灵精灵。我的问题是,subscribe方法以错误的顺序完成,因此最终得到的链有时会变为Venusaur> Bulbasaur> Ivysaur,而不是Bulbasaur> Ivysaur> Venusaur。我怎样才能以正确的顺序得到这些?

private loopThroughEvolutionChain(chain: any): any {
    let evoChain: PokemonEvolution[] = [];
    let evoData = chain.chain;
    let index: number = 1;

    do {
      let evoDetails = evoData['evolution_details'];

      this.getPokemonEvolutionDetails(evoData.species.name).subscribe((pkmn: any) => {
          evoChain.push(new PokemonEvolution(index, pkmn.name, pkmn.sprites.front_default, pkmn.sprites.front_shiny));
          index++;
      });

      evoData = evoData['evolves_to'][0];
    } while (!!evoData && evoData.hasOwnProperty('evolves_to'));

    return evoChain;
  }

使用getPokemonEvolutionDetails更新了11/4/19

private getPokemonEvolutionDetails(name: string) {
    let apiUrl = `${this.apiBaseUrl}/pokemon/${name}`;

    return this._httpClient.get(apiUrl).pipe(
      map((response: any) => {
        return response;
      })
    );
  }

0 个答案:

没有答案