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”}]

我如何到达内部字段的名称，消息，电话...

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返回的Json数组

1 个答案: