时间戳

首页 > 解决方案 > 角度显示嵌套值，同时忽略动态键

json - 角度显示嵌套值，同时忽略动态键

问题描述

我正在尝试显示我保存在 Firebase 数据库中的用户。当我从 firebase 获得 json 响应时，它以动态值开始。示例：“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"
            }
        }

这是我的参加者.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>

我再次尝试在卡片中显示每个用户的值。任何帮助和/或指针将不胜感激。

标签： jsonangular

解决方案

这是我的解决方案： 我使用了 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));
    })
  })

你将拥有一系列对象......

我希望它对你有帮助。

推荐阅读