來自已解決的Promise的數據無法正確加載到組件視圖（Angular2，JavaScript）中

Question

我是Angular2的新手，如果這是一個超級基本的修復程序，請原諒我。

我正在使用PokeAPI和Angular2進行教程學習，但嘗試偏離該教程將Pokemon類型添加到渲染視圖中。 但是，我的PokedexService中的數據沒有正確加載到我的視圖模板中。

在Github上產生錯誤的完整代碼庫。

由於它與原始教程有所types ，因此我更新了Pokemon類，為其添加了types屬性：

export class Pokemon {
  id: number;
  sprite: string;
  name: string;
  types: [];
}

在我的pokedex.service.ts服務文件中，我添加了一個新方法getPokemonTypes() ，該方法向API查詢每種Pokemon的類型，並返回包含一種或兩種類型的數組。

getPokemonTypes(id: number): Promise<any> {
    return this.http.get(`${this.baseUrl}${id}/`)
    .toPromise()
    .then(response => response.json())
    .then(details => {
      const types = details.types
      .map(t => {
        return t.type.name;
      });
      return types;
    });
}

在我app.component.ts ，我叫的方法loadMore()在我的ngOnInit 應該加載所有必要的數據渲染視圖時，應用程序初始化。 在loadMore()方法中，我調用了pokedexService的getPokemon()方法，然后在Promise的解析鏈中，我調用了getPokemonTypes()將Pokemon類型的值映射到我的Pokemon對象上。

export class AppComponent implements OnInit {
  pokemon: Pokemon[] = [];

  isLoading: boolean = false;
  error: boolean = false;

  constructor(private pokedexService: PokedexService) { }

  ngOnInit() {
    this.loadMore();
  }

  loadMore() {
    this.isLoading = true;

    this.pokedexService.getPokemon(this.pokemon.length, 9)
    .then(pokemon => {
      pokemon = pokemon.map(p => {
        p.imageLoaded = false;

         // Map Pokemon types onto each Pokemon object
        p.types = this.pokedexService.getPokemonTypes(p.id);
        return p;
      });

      this.pokemon = this.pokemon.concat(pokemon);
      this.isLoading = false;
      this.error = false;
    })
    .catch(() => {
      this.error = true;
      this.isLoading = false;
    })
  }
}

在我的視圖模板（ app.component.html ）中，我添加了<div>來保存神奇寶貝類型。 目前，div僅通過{{p.types}}渲染，這樣我才能獲得引起錯誤的原因的反饋。 供參考，以下是視圖模板：

<div class="pokedex">
  <div class="pokedex-pokemon" *ngFor="let p of pokemon">
    <div class="pokedex=pokemon-id">
      #{{p.id}}
    </div>
    <img [ngClass]="{'hidden': !p.imageLoaded}" class="pokedex-pokemon-sprite" (load)="p.imageLoaded = true" [attr.src]="p.sprite" />
    <div class="pokedex-pokemon-name">
      {{p.name | capitalize}}
    </div>
    <div class="pokedex-pokemon-types" *ngIf="!isLoading">
      {{p.types}}
    </div>
  </div>
</div>

當我重新加載應用程序時，視圖呈現如下： 在這里，不呈現類型，而是顯示[object Promise] 。 我也嘗試過使用{{p.types[0]}}{{p.types[1]}}渲染視圖，因為Pokemon.types是類型數組，但是當我這樣做時，它不會渲染視圖中的任何內容：

我假設我某種程度上需要解決types屬性中存儲的Promise，但是我認為在getPokemonTypes()方法中對返回的HTTP Promise調用getPokemonTypes()使Promise為我解決一個值。

作為附帶說明，我最終希望在我的視圖中呈現如下類型：

<div class="pokedex-pokemon-types">
    <div *ngFor="let t of pokemon.types">
        <div [ngClass]="${t}">{{t}}</div>
    </div>
</div>

但到目前為止，我也無法將其渲染。 我不完全確定[ngClass]指令的正確語法是什么，以使其使用Pokemon類型名稱作為每個div的類。

感謝您提供的任何幫助！ 不勝感激。

Answer 1

這不是this.pokedexService.getPokemonTypes(p.id)的結果嗎？ 如果是這樣，我認為您應該寫這樣的東西：

pokemon = pokemon.map(p => {
  p.imageLoaded = false;

    this.pokedexService.getPokemonTypes(p.id)
    .then(types => {
      p.types = types;
      this.pokemon = this.pokemon.concat(p);
      this.isLoading = false;
      this.error = false;      
    });
  });