显示带有 Angular 的对象

Question

我需要帮助来显示 angular 的 firebase 对象。我尝试用 console.log 和 html

显示对象 1

<div *ngFor="let k of body | keys ; let i = index">
   <h2>{{ body.nombre }} </h2>
</div>

{nombre: "chat1"} 
nombre: "chat1"
__proto__: Object

Answer 1

您可以创建一个 getter，它将 return 给您使用 Object.keys(...) 的密钥。

然后在模板中，您可以遍历键并使用 [] 成员访问运算符打印每个键的值：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  body = { nombre: 'Chat1', foo: 'bar' };

  get transformedBody() {
    return Object.keys(this.body);
  }
}

然后像这样使用它：

<div *ngFor="let key of transformedBody">
  <h2>{{ key }}: {{ body[key] }}</h2>
</div>

这里有一个 Sample StackBlitz 供您参考。

Answer 2

你也可以试试

<div *ngFor="let k of data"> -- where data is the field name to which you are saving the data
    <h2>{{ k.nombre }} </h2>
</div>

显示带有 Angular 的对象

Display an object with Angular

angular

angular7