無法在 Angular 項目中顯示來自 PokeAPI 的動畫精靈

Question

我正在使用 Angular 開發一個 Pokedex 項目。

我正在成功獲取 PokeAPI，我可以通過以下方式顯示常規精靈：

<img [src]="pokemon[0].sprites.front_default" [alt]="pokemon[0].name" >

但是當我嘗試通過編寫在不同的目錄中顯示動畫 gif 時：

[src]="pokemon[0].sprites.versions.generation-v.black-white.animated.front_default"

它拋出兩個錯誤說明：

“DetailsComponent”類型上不存在屬性“v”。

“DetailsComponent”類型上不存在屬性“white”。

發生這種情況是因為我必須解析包含連字符的文本，而 Angular 將其讀取為其他內容

在沒有問題的情況下解析圖像源的正確方法是什么？

Answer 1

我建議您在 typescript 文件中獲取圖像的文本，將其保存在變量pokemonImage中，並將該變量用作 [src] 屬性的值。
在你的 HTML 頁面上有這樣的東西： <img id="imageOfPokemon" alt="{{pokemonName}}" src="{{pokemonImage}}" width="250" height="250"/> 。
, and save the following as the value: this.pokemonImage = pokemon['sprites']['versions']['generation-v']['black-white']['animated'].front_default;在您的 typescript 文件中，創建屬性 ，並將以下內容保存為值： this.pokemonImage = pokemon['sprites']['versions']['generation-v']['black-white']['animated'].front_default;