I have data stored in a Firebase Realtime Database that I want to display in my Angular application upon startup. My TripService is responsible for loading the data, and I am facing an issue with passing this data to the main AppComponent. I attempted to convert the subscription to a Promise, but it did not work as expected. Can you help me identify where I am going wrong? Additionally, how can I ensure that AppComponent reads the data only after TripService has loaded it?
The crucial code snippet from trip.service.ts is shown below:
export class TripService {
trips: any;
private db: AngularFireDatabase
constructor(database: AngularFireDatabase) {
this.db = database;
}
async loadAllTrips(){
this.db.list('trips').snapshotChanges()
.pipe(map(changes =>
changes.map(c =>
({key: c.key, ...<Object>c.payload.val()}))))
.subscribe(data => {
this.trips = data;})
}
}
The key part of app.component.ts looks like this:
export class AppComponent implements OnInit {
ngOnInit() {
this.tripService.loadAllTrips()
.then(() => {this.trips = this.tripService.trips;);
}
trips: any;
}