Угловое отображение вложенных значений при игнорировании динамических клавиш

Question

Я пытаюсь отобразить пользователей, которых я сохранил в своей базе данных Firebase.Когда я получаю ответ json от firebase, он начинается с динамического значения.Пример: "SivqCsErHQZNvGMe7p6r5nGknFy2".В моем угловом приложении, как мне обойти это и отображать только пары ключ / значение, приведенные ниже.

{
            "SivqCsErHQZNvGMe7p6r5nGknFy2": {
                "attendance": "Not Present",
                "company": "Company",
                "displayName": "Jane Doe",
                "email": "jane@company.com",
                "id": "SivqCsErHQZNvGMe7p6r5nGknFy2",
                "img": "https://img.com",
                "phoneNumber": "3452138765",
                "position": "CTO"
            },
            "zqRvsxf9Z3eCU740vOq4jklBrK92": {
                "attendance": "present",
                "company": "ACME Co.",
                "displayName": " John Doe",
                "email": "john@acmeco.com",
                "id": "zqRvsxf9Z3eCU740vOq4jklBrK92",
                "phoneNumber": "9998887765",
                "position": "CEO"
            }
        }

Вот мой файл accedees.ts

import { Component } from '@angular/core';
import { ToastController, Refresher } from 'ionic-angular';
import { FirebaseUserData } from '../../providers/firebase-user-data';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-attendees',
  templateUrl: 'attendees.html',
})
export class AttendeesPage {

  attendees: any = [];

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public firebaseuserData: FirebaseUserData,
    public toastCtrl: ToastController,
  ) {}

  ionViewWillEnter() {
    console.log('ionViewDidLoad AttendeesPage');
    this.updateAttendees();
  }

  updateAttendees(){
    this.firebaseuserData.getAttendees().subscribe((attendees) => {
      this.attendees = attendees;
      console.log(attendees)
    });    
  }

  doRefresh(refresher: Refresher) {
      console.log(this.attendees);    
      setTimeout(() => {
        this.updateAttendees();
        refresher.complete();

        const toast = this.toastCtrl.create({
          message: 'Attendees list has been updated.',
          duration: 3000
        });
        toast.present();
      }, 1000);
  }  
}

Вот мой файл провайдеров:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class FirebaseUserData {
    data: any;

    constructor(
        private http: HttpClient
    ) {}

    load(): any {
        let timeStamp = +new Date();
        return this.http.get('https://url.firebaseio.com/users.json?tsp=' + timeStamp,);  
    }    

    getAttendees() {
        return this.load().map((data: any) => {
            return data;
        });
    }

}

И, наконец, вот мои посетители.html

<ion-card *ngFor="let attendee of attendees">

  <ion-item>
    <ion-avatar item-start *ngIf="attendee.img; else defcon">
      <img src="{{attendee[0].img}}">
    </ion-avatar>
    <ng-template #defcon>
      <ion-avatar item-start>
        <img src="assets/img/icon-1024.png">
      </ion-avatar>
    </ng-template>
    <h2>{{attendee.displayName}}</h2>
    <p>{{attendee.company}}</p>
  </ion-item>

  <ion-card-content>
    <p>Attendance Type: {{attendee.attendance}}</p>
    <p>Position: {{attendee.position}}</p>
    <p>Position: {{attendee.email}}</p>
    <p>Position: {{attendee.phoneNumber}}</p>
  </ion-card-content>

</ion-card>

Снова я пытаюсь отобразить значения каждого пользователя на карточке.Любая помощь и / или указатели будут оценены.

Answer 1

Это было мое решение: Я использовал angular-fire2

Во-первых, я импортировал необходимых поставщиков:

import { AngularFireList, AngularFireObject, AngularFireDatabase } from 'angularfire2/database';

Объявить в конструкторе

  constructor(private afDB: AngularFireDatabase) { }

После этого я создал универсальную функцию (получает имя документа), чтобы вернуть все мои списки:

public getListAll = (doc: string): AngularFireList<T> => {
return this.afDB.list(doc);}

Чтобы использовать эту функцию:

getListAll('news').snapshotChanges()
  .subscribe(items => {
    this.newsList = [];
    items.forEach( i => {
      const _new = i.payload.toJSON();
      _new['$key'] = i.key;
      this.newsList.unshift(<News>(_new));
    })
  })

Иу вас будет и массив объектов ...

Надеюсь, это вам поможет.