我添加了您提到的功能,但登录时显示此错误:
TypeError: Cannot set property 'photo' of undefined
at feed.page.ts:32
at auth.esm.js:326
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.js:17299)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at zone.js:889
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at resolvePromise (zone.js:831)
at zone.js:896
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:502)
at ZoneTask.invoke (zone.js:487)
at timer (zone.js:2281)
如果刷新页面,它会显示:
getEvents() is not a function
我所做的更改仍然出现错误。这很奇怪,因为当我登录并重定向到FeedPage时,我得到未定义的错误照片,如果刷新,则getEvents()不是e函数。刷新后,feed.html中的photo变量为null,无法绑定到ngModel并在头像中显示照片。
events: any[] = [];
likes: any[] = [];
pageSize = 10;
cursor: any; // can be declared as DocumentSnapshot
infiniteEvent: any;
state: any;
private photo = '';
// tslint:disable-next-line: max-line-length
constructor(public navCtrl: NavController, private loadingCtrl: LoadingController, private toastCtrl: ToastController, private http: HttpClient, public actionSheetCtrl: ActionSheetController, public alertCtrl: AlertController, public modalCtrl: ModalController, public popoverCtrl: PopoverController) {
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
this.photo = user.photoURL;
this.getEvents();
} else {
console.log('Not authenticated');
// No user is signed in.
}
});
}
public async getEvents() {
const loading = await this.loadingCtrl.create({
message: 'Loading events...'
});
loading.present();
const query = firebase.firestore().collection('events').orderBy('created', 'desc').limit(this.pageSize);
query.onSnapshot((snapshot) => {
const changedDocs = snapshot.docChanges();
changedDocs.forEach((change) => {
if (change.type === 'added') {
// TODO
}
if (change.type === 'modified') {
for (let i = 0; i < this.events.length; i++) {
if (this.events[i].id == change.doc.id) {
this.events[i] = change.doc;
}
}
}
if (change.type === 'removed') {
// TODO
}
})
})
query.get()
.then((events) => {
events.forEach((event) => {
this.events.push(event);
});
loading.dismiss();
if (events.size == 0) {
this.cursor = 0;
} else {
this.cursor = this.events[this.events.length - 1]; // the last index of the collection
}
console.log(this.events);
}).catch((err) => {
console.log(err);
});
}
答案 0 :(得分:0)
运行firebase.auth().currentUser
时似乎未设置Feed.ts
。这是预料之中的,因为客户端可能需要与服务器检查令牌是否仍然有效,这是异步操作。
在这种情况下,请始终使用onAuthStateChanged
侦听器,如getting the current signed in user上文档的第一个代码段所示。
类似这样:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
... code that uses the user's properties
} else {
// No user is signed in.
}
});
修改
您的新getEvents() is not a function
错误是由以下事实引起的:this
在声明为function()
的回调函数中具有不同的含义。这里最简单的解决方案是使用=>
表示法,该表示法在函数内保持this
的值:
firebase.auth().onAuthStateChanged((user) => {
if (user) {
this.photo = user.photoURL;
this.getEvents();
} else {
console.log('Not authenticated');
// No user is signed in.
}
});
请注意,您的其余代码已使用=>
表示法,这使我怀疑您还没有写JavaScript这么久。我强烈建议您使用JavaScript中的回调函数教程,因为这将为您节省很多时间和问题。
答案 1 :(得分:0)
哦,现在我完全理解了,正如您所说的那样,我在这里并没有写太多的javascript代码,因为我在努力学习一些tutoirals并添加其他一些东西。我已解决问题,您也帮助我了解了基本但重要的事情。非常感谢您的宝贵时间。