I am encountering an issue with retrieving the eventID value from my Events collection in Firestore. Although I am able to successfully display all the events in my app, I require the eventID for additional functionalities.
As someone new to TypeScript and Angular, I am struggling to understand why this functionality is not working as expected.
Inside the auth function, when I log the userid variable, it retrieves the value correctly. However, outside the function, it returns undefined.
Similarly, when I log the entire eventList variable which stores information from Firestore, it logs all the details. But attempting to retrieve specific values like this.eventList.eventID or this.eventList.title results in undefined.
What am I missing here?
Here is the relevant code snippet:
import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';
import { async } from '@firebase/util';
export class Tab1Page implements OnInit {
public eventList;
public userid;
constructor(private firestore: AngularFirestore, public fAuth: AuthService, public router: Router) {}
ngOnInit() {
this.fAuth.firebaseAuth.user.subscribe(res => {
this.userid = res.uid; //current logged in user id
//fetch only events created by the logged-in user
this.firestore.collection('Events', ref => ref.where("eventCreator", "==", this.userid)).valueChanges().subscribe(event => {
this.eventList = event;
console.log(this.eventList); //logs all the info from firestore
console.log(this.eventList.eventID); //logs undefined
console.log(this.userid); //logs the userid
});
});
console.log(this.userid); //logs undefined
}
}