CODEWITHSUNDEEP
typescriptionic-frameworkfirebase-realtime-databaseangularfire2
user2337258
user2337258

Reputation: 3

AngularFire2 - Ionic - Cannot read property of undefined

The HTML is throwing an undefined error as if the data isn't retrieved. This is my service call to a Firebase list:

Service.ts

 getGames(eventId) {
    var ref =  this.afd.list('/game/', ref => ref.orderByChild('event').equalTo(eventId)).valueChanges();

    return ref;

}

My page.ts

currentEvent: any;
 gamesList: any[];
constructor(public navCtrl: NavController, public navParams: NavParams, public 
firebase: FirebaseProvider) {
 this.currentEvent = navParams.get('data');
 this.firebase.getGames(this.currentEvent).subscribe((val: any) => {
   val.forEach((e) => {

    console.log("date " + e.date);
  })

  this.gamesList = val;
})

}

In the foreach statement, i see the data correctly in the log. It throws an error on the html, even though it looks like the "gamesList" is populated.

page.html

 <ion-list>
  <ion-list-header>Games</ion-list-header>
   <ion-item ngFor="let g of gamesList">
     {{g.date}}
   </ion-item>
 </ion-list>

Full Error:

  Unhandled Promise rejection: Cannot read property 'date' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'date' of undefined
    at Object.eval [as updateRenderer] (LandetailPage.html:20)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)
    at checkAndUpdateView (core.js:13849)
    at callViewAction (core.js:14195)
    at execComponentViewsAction (core.js:14127)
    at checkAndUpdateView (core.js:13850)
    at callWithDebugContext (core.js:15098)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14635)
    at ViewRef_.detectChanges (core.js:11619)
    at NavControllerBase._viewAttachToDOM (nav-controller-base.js:460) TypeError: Cannot read property 'date' of undefined
    at Object.eval [as updateRenderer] (ng:///AppModule/LandetailPage.ngfactory.js:66:27)
    at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/vendor.js:15277:21)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:14391:14)
    at callViewAction (http://localhost:8100/build/vendor.js:14737:21)
    at execComponentViewsAction (http://localhost:8100/build/vendor.js:14669:13)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:14392:5)
    at callWithDebugContext (http://localhost:8100/build/vendor.js:15640:42)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:8100/build/vendor.js:15177:12)
    at ViewRef_.detectChanges (http://localhost:8100/build/vendor.js:12161:22)
    at NavControllerBase._viewAttachToDOM (http://localhost:8100/build/vendor.js:54343:40)
n.onUnhandledError @ polyfills.js:3
r @ polyfills.js:3
(anonymous) @ polyfills.js:3
n.microtaskDrainDone @ polyfills.js:3
o @ polyfills.js:3
Promise.then (async)
r @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
r.scheduleTask @ polyfills.js:3
r.scheduleMicroTask @ polyfills.js:3
f @ polyfills.js:3
t.then @ polyfills.js:3
NavControllerBase._nextTrns @ nav-controller-base.js:246
NavControllerBase._queueTrns @ nav-controller-base.js:185
NavControllerBase.push @ nav-controller-base.js:70
webpackJsonp.184.LanPage.goToLAN @ lan.ts:58
(anonymous) @ LanPage.html:22
handleEvent @ core.js:13589
callWithDebugContext @ core.js:15098
debugHandleEvent @ core.js:14685
dispatchEvent @ core.js:10004
(anonymous) @ core.js:10629
(anonymous) @ platform-browser.js:2628
globalListener @ platform-browser.js:3196

Thanks for the help!

Upvotes: 0

Views: 335

Answers (1)

askilondz
askilondz

Reputation: 3294

I believe the issue is because on your html it's trying to loop through gamesList before the data is fetched from firebase. You need to set it to async.

<ion-item ngFor="let g of gamesList | async">

And if you do it this way you don't need to call subscribe... let the async pipe handle subscriptions for you.

this.gamesList = this.firebase.getGames(this.currentEvent)

Upvotes: 1

Related Questions