AngularFire2 retrieve Object data not working, but List data does

Question

I am trying to read data from Firebase using AngularFire2 in Typescript. My code works with the async pipe when retrieving a list of data, but when getting an object, I cannot access the contents.

Data Structure on Firebase: (myapp.firebaseio.com/LeagueStandings)

Subset of code:

import { Component } from '@angular/core';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';

Standings: FirebaseObjectObservable<any[]>;
constructor(public FirebaseData:AngularFireDatabase) {
    this.Standings = FirebaseData.object('/LeagueStandings');
    // Added the following to see the debug
    this.Standings.subscribe(data => { 
        console.log(data); 
    });
}

HTML Sample bit:

<ion-col><ion-badge color="secondary">{{Standings.Wins | async }}</ion-badge></ion-col>

The problem is that the data never shows. However, the same sort of thing on array data (individual game stats for instance) using the FirebaseData.list does work. I do not know how to easily extract the data structure for the page to display.

Adding the console dump does show the data returning from Firebase, but my home.html is not updating.

Sorry, that was a typo copied over from editing the code down to a small sample. I have updated the HTML as it should be referencing Standings. — Steven Scott
Im still investigating it , but have you tried other syntax maybe? like that ` Standings['Wins'] ` ? (long shot.. :) ) — nisanarz

Steven Scott Steven Scott · Accepted Answer · 2017-06-13T22:04:22

Apparently reading the AngularFire2 documentation closely will solve the problem. I noticed how the documentation was displaying the data, and changed my code to match, and it works. The HTML was all I had to change.

import { Component } from '@angular/core';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';

Standings: FirebaseObjectObservable<any[]>;
constructor(public FirebaseData:AngularFireDatabase) {
    this.Standings = FirebaseData.object('/LeagueStandings');
}

HTML Sample bit:

<ion-col><ion-badge color="secondary">{{Standings.Wins | async }}</ion-badge></ion-col>

changes to:

<ion-col><ion-badge color="secondary">{{ (Standings | async)?.Wins }}</ion-badge></ion-col>

(Standings | async)?.Wins was the correction. Wait on the object using the async pipe, then the optional field (?) and then the field (.Wins).

AngularFire2 retrieve Object data not working, but List data does

1 Answers