访问数组中的值答案

【问题标题】：Accessing value in an Array访问数组中的值
【发布时间】：2020-10-20 11:33:52
【问题描述】：

我一直在做一个简单的测试项目，但我碰巧遇到了这个非常奇怪的问题。我无法访问数组中的值。

pokemonStats$: Observable<PokemonStats[]>;

getPokemonStats(id: number): any {
this.pokemonStats$
.pipe(take(1))
.subscribe(stats => {
  console.log(stats instanceof Array);
  console.log('length', stats.length);
  console.log('du', stats);
  console.log('test', stats[1]);
});
}

这是输出：

这里发生了什么？一位同事建议它可能是一个类似数组的结构，这就是我添加“instanceof”日志的原因。非常感谢任何帮助。

编辑：这是代码，它被填充的地方

this.pokemonStats$ = this.getAllPokemonStats(ids);

getAllPokemonStats(ids: number[]): Observable<PokemonStats[]> {
const pokemonArray: PokemonStats[] = [];
ids.forEach(id => {
  const url = 'https://pokeapi.co/api/v2/pokemon/' + id;
  this.http.get(url)
    .pipe(take(1))
    .subscribe((data: PokemonStatsAPI) => {
      pokemonArray.push({
          id: data.id,
          name: data.name,
          speed: data.stats[0].base_stat,
          hp: data.stats[5].base_stat,
          attack: data.stats[4].base_stat,
          defense: data.stats[3].base_stat
        });
    });
});
return of(pokemonArray);

}

【问题讨论】：

pokemonStats$: Observable<PokemonStats[]> 在这一行中，您明确指出 pokemoStats$ 在类型定义中是 PokemonStats[] 的 Observable
这就是我订阅它以访问数组的原因。但是为什么它显示长度：0，为什么我不能访问任何值，即使它们在 console.logging 整个对象时明显存在？
第二个日志条目很有趣，因为它显示length 0，但它应该是您下一个日志中的 5。你能显示实际创建数组的代码吗？或者一个可重现的例子。
尝试使用JSON.stringify(stats) 并将此json 添加到您的问题中，以便我们可以在stats 中查看原始数据。
你能不能尝试删除take(1)，然后看看结果如何。

标签： arrays angular typescript rxjs-observables

【解决方案1】：

您正在使用 pokemonArray 返回新的 observable，它是空的，将被异步填充，因此当您订阅 getAllPokemonStats 时它是空的。

使用forkJoin 运算符执行http 请求并使用map 运算符映射它们：

getAllPokemonStats(ids: number[]): Observable<PokemonStats[]> {
  return forkJoin(ids.map(id => {
    return this.http.get(`https://pokeapi.co/api/v2/pokemon/${id}`);
  })).pipe(
    map(results => results.map(data => ({
      id: data.id,
      name: data.name,
      speed: data.stats[0].base_stat,
      hp: data.stats[5].base_stat,
      attack: data.stats[4].base_stat,
      defense: data.stats[3].base_stat
    }))),
  );
}

【讨论】：