以角度将对象显示为HTML

对不起，我的问题是noob。 我创建了一个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}显示一个空白页

{{ pokemon | json }} {{pokemon | json}}以{}的形式返回一个空对象。

---

我可能做错了什么吗？

将属性调用为

{{{pokemon？.name}

您需要使用

json

管道

{{pokemon|json}

或

Id:{{pokemon.Id}
名称：{{pokemon.Name}
能力：

{{ability}

类型：

{{types}

不能直接使用对象。必须通过.（点）符号或对象[property]方式访问对象属性

在您的情况下，如果要使用name属性，请使用

{{pokeman.name}

或

{{pokeman[name]}

---

您好，谢谢您的回复。我尝试过这个，但是现在它以{}的形式显示一个空对象。我尝试过其他人建议的其他方法，例如{{pokemon.name}}和{{pokemon[name]}}，但这些没有显示任何内容。您知道解决这些问题的方法吗？这是因为对象是空的，您可以尝试控制台记录对象吗？控制台记录对象会返回一个对象，其中包含名称、id、能力、类型和图像数据，因此它看起来不是空的。实际上，这是因为您没有为其分配任何值

pokemon

。在subscribe函数中添加

this.pokemon=data

如果不是太多，我可以再问一件事吗？当名称和ID显示在html上时，能力和类型数据仍然显示[object].Console日志记录它们都返回数组，其中包含各自的数据。这里是否也有我忘记的内容？