在 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 }} 中显示它时，它只是 returns [object, Object]

我该如何解决这个问题？

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

{{ pokemon | json }}

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

我是不是做错了什么？

Answer 1

将属性称为{{pokemon?.name}}

Answer 2

您需要使用 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>

Answer 3

不能直接使用对象。您必须通过任一方式访问对象属性。（点）表示法或对象 [属性] 方式。

在你的情况下，如果你想使用名称的属性然后使用

{{ pokeman.name }}

或

{{ pokeman[name] }}

在 Angular 中将对象显示为 HTML

Displaying object into HTML in Angular

html

http

object

angular

pokeapi