显示从 http get 返回的 Json 数组答案

【问题标题】：Displaying Json array returnd from http get显示从 http get 返回的 Json 数组
【发布时间】：2019-05-19 07:01:26
【问题描述】：

我想显示来自 firebase 的内容我从 HTTP 获取请求中获取数据，我想使用 ngFor 显示它

这是我获取数据的方式

///a service
 getMessages(){
    return this.http.get('https://bigproject-dd88e.firebaseio.com/data.json')
    .map((response:Response)=>{
const data: Message[]=response.json();
return data;
    }

    ).catch(
      (error:Response)=>{

        return Observable.throw('something went wrong');
      }

    );
  }

这是我的组件

export class MessagesComponent implements OnInit {
  Message=[];
  constructor(private global:GlobalService) {

   }
  ngOnInit() {

    this.GenaerateMessages();
  }
  GenaerateMessages(){
    this.global.getMessages().subscribe(
      Message=>this.Message=Message
    );
  }

}

这是我的 HTML

<div *ngFor="let item of Message | keyvalue">

     <p>{{item.value|json}}</p>
</div>

我在屏幕上看到了这个

[ {“电子邮件”：“loay-gohan@hotmail.com”，“消息”：“loayy”，“姓名”：“loay”，“电话”：“123123123”}]

[ { "email": "example@example", "message": "hi", "name": "..", "phone": "123123" } ]

如何访问内部字段名称、消息、电话...

【问题讨论】：

标签： json angular http ngfor

【解决方案1】：

看起来 eachitem.value 包含一个数组和一个对象。如果是这种情况，您可以这样处理：

<div *ngFor="let item of Message | keyvalue">
  <div>EMAIL: {{ item.value[0].email }}</div>
  <div>MESSAGE: {{ item.value[0].message }}</div>
  <div>NAME: {{ item.value[0].name }}</div>
  <div>PHONE: {{ item.value[0].phone }}</div>

  <pre>{{ item.value | json }}</pre>
</div>

如果item.value 数组有多个对象，您可能希望用额外的内部ngFor 循环它您不使用value.key。你不需要吗？

【讨论】：