在 Angular 中将对象显示为 HTML

Question

抱歉这个菜鸟问题。我创建了一个 http 请求并检索了一些 pokemon 数据并将其放入名为 pokemon 的对象中，如下所示：

export class AppComponent implements OnInit{
  title = 'Pokedex';
  apiURL = 'https://pokeapi.co/api/v2/pokemon/1';
  pokemon = {};
  constructor(private http: HttpClient){}

  ngOnInit(): void{
    this.http.get(this.apiURL).subscribe(data =>{
        const pokemon = {
          name: data['name'],
          id: data['id'],
          abilities: data['abilities'].map( ability => ability['ability']['name']),
          types: data['types'].map( type => type['type']['name']),
          image: data['sprites']['front_default']
      }
      console.log(pokemon);

当我控制台记录该对象时，它会在控制台中正常输出。但是，当我尝试在 html 中显示它时，{{ pokemon }}它只返回 [object, Object]

我该如何解决这个问题？

我已经尝试过下面建议的方法。{{pokemon.name}}、{{pokemon[name]}} 和 {{pokemon?.name} 显示空白页面。

{{ 口袋妖怪 | json }}

返回一个空对象，形式为 {}。

我也许做错了什么吗？

Answer 1

你需要使用json管道

<pre>{{ pokemon | json }}</pre>

或者

<div> Id: {{ pokemon.id }} </div>
<div> Name: {{ pokemon.name }} </div>


<div> Abilities:
  <ul>
    <li *ngFor="let ability of pokemon.abilities"> {{ ability }}</li>
  </ul>
</div>

<div> Types:
  <ul>
    <li *ngFor="let type of pokemon.types"> {{ types }}</li>
  </ul>
</div>