Отображение возврата массива Json из http get - PullRequest
Новая
       26

Отображение возврата массива Json из http get

0 голосов
/ 19 мая 2019

Я хочу отображать содержимое из базы данных. Я получаю данные из 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>

Я получаю это на экране

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

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

как мне добраться до внутренних полей: имя, сообщение, телефон ...

1 Ответ

0 голосов
/ 19 мая 2019

похоже, что каждый item.value содержит один массив с одним объектом.Если это так, вы можете достичь этого следующим образом: 

<code><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 }}

Если массив item.value содержит более одного объекта, вы можете захотеть зациклить его с дополнительным внутренним ngFor Вы не используете value.key.Вам это не нужно?

...