Typescript AngularFire2-Ionic-无法读取未定义的属性
HTML抛出了一个未定义的错误,就好像没有检索到数据一样。这是我对Firebase列表的服务呼叫: 服务台Typescript AngularFire2-Ionic-无法读取未定义的属性,typescript,ionic-framework,firebase-realtime-database,angularfire2,Typescript,Ionic Framework,Firebase Realtime Database,Angularfire2,HTML抛出了一个未定义的错误,就好像没有检索到数据一样。这是我对Firebase列表的服务呼叫: 服务台 getGames(eventId) { var ref = this.afd.list('/game/', ref => ref.orderByChild('event').equalTo(eventId)).valueChanges(); return ref; } 我的网页 currentEvent: any; gamesList: any[]; co
getGames(eventId) {
var ref = this.afd.list('/game/', ref => ref.orderByChild('event').equalTo(eventId)).valueChanges();
return ref;
}
我的网页
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;
})
}
在foreach语句中,我在日志中正确地看到了数据。它会在html上抛出一个错误,即使看起来“gamesList”已填充
page.html
<ion-list>
<ion-list-header>Games</ion-list-header>
<ion-item ngFor="let g of gamesList">
{{g.date}}
</ion-item>
</ion-list>
游戏
{{g.date}
完全错误:
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
未处理的承诺拒绝:无法读取未定义的属性“日期”;区域:;任务:承诺;值:TypeError:无法读取未定义的属性“date”
在Object.eval[作为更新者](LandetailPage.html:20)
在Object.debugUpdateRenderer[作为updateRenderer](core.js:14735)
在checkAndUpdateView(core.js:13849)
在callViewAction上(core.js:14195)
在execComponentViewsAction(core.js:14127)
在checkAndUpdateView(core.js:13850)
在callWithDebugContext上(core.js:15098)
在Object.debugCheckAndUpdateView[作为checkAndUpdateView](core.js:14635)
在ViewRef_u2;.detectChanges(core.js:11619)
在NavControllerBase.\u viewAttachToDOM(nav controller base.js:460)类型错误:无法读取未定义的属性“date”
在Object.eval[as updateRenderer](ng:///AppModule/LandetailPage.ngfactory.js:66:27)
在Object.debugUpdateRenderer[作为updateRenderer](http://localhost:8100/build/vendor.js:15277:21)
在checkAndUpdateView(http://localhost:8100/build/vendor.js:14391:14)
在callViewAction(http://localhost:8100/build/vendor.js:14737:21)
在执行组件视图操作时(http://localhost:8100/build/vendor.js:14669:13)
在checkAndUpdateView(http://localhost:8100/build/vendor.js:14392:5)
在callWithDebugContext(http://localhost:8100/build/vendor.js:15640:42)
在Object.debugCheckAndUpdateView[作为checkAndUpdateView](http://localhost:8100/build/vendor.js:15177:12)
在ViewRef_u3;检测更改时(http://localhost:8100/build/vendor.js:12161:22)
在导航控制器基座上(http://localhost:8100/build/vendor.js:54343:40)
n、 onUnhandleError@polyfills.js:3
r@polyfills.js:3
(匿名)@polyfills.js:3
n、 microtaskDrainDone@polyfills.js:3
o@polyfills.js:3
Promise.then(异步)
r@polyfills.js:3
t、 scheduleTask@polyfills.js:3
r、 scheduleTask@polyfills.js:3
r、 scheduleMicroTask@polyfills.js:3
f@polyfills.js:3
t、 然后@polyfills.js:3
NavControllerBase.\u nextTrns@nav controller base.js:246
NavControllerBase.\u queueTrns@nav controller base.js:185
NavControllerBase.push@nav controller base.js:70
webpackJsonp.184.LanPage.goToLAN@lan.ts:58
(匿名)@LanPage.html:22
handleEvent@core.js:13589
callWithDebugContext@core.js:15098
debugHandleEvent@core.js:14685
dispatchEvent@core.js:10004
(匿名)@core.js:10629
(匿名)@platform browser.js:2628
globalListener@platformbrowser.js:3196
谢谢你的帮助 我认为问题在于,在从firebase获取数据之前,html试图在gamesList中循环。您需要将其设置为异步
<ion-item ngFor="let g of gamesList | async">
您能在问题中添加准确的错误消息吗?不幸的是,这是我尝试的另一条导致相同错误的路径。我将发布完整错误。如果您不使用异步管道,您仍然可以使用与在subscribe()中设置gamesList相同的方法。但在html中,您需要首先检查gameList是否为null:
*ngIf=“gamesList”
然后在其中执行for循环。
this.gamesList = this.firebase.getGames(this.currentEvent)