显示从 http get 返回的 Json 数组

Question

我想显示来自 firebase 的内容我从 HTTP get 请求中获取数据，我想使用 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>

我在屏幕上看到了这个

[ { "email": "loay-gohan@hotmail.com", "message": "loayy", "name": "loay", "phone": " 123123123" } ]

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

如何访问名称、消息、phone...

内部字段

Answer 1

看起来每个item.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。不需要吗？

显示从 http get 返回的 Json 数组

Displaying Json array returnd from http get

json

angular

http

ngfor