Whenever I refresh the page, my constructor call doesn't initialize properly.
I've been following this guide:
https://www.youtube.com/watch?v=gUmItHaVL2w&ab_channel=TraversyMedia
https://github.com/angular/angularfire
UPDATE:
In order to make it work again, I have to navigate to another page, refresh, and then go back for the call to be executed correctly.
schedule.service.ts
import {Injectable} from '@angular/core';
import {AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument} from '@angular/fire/firestore';
import {ScheduleInterface} from '../../models/schedule';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import {AuthService} from '../auth/auth.service';
@Injectable({
providedIn: 'root'
})
export class ScheduleService {
schedulesCollection: AngularFirestoreCollection<ScheduleInterface>;
schedules: Observable<ScheduleInterface[]>;
scheduleDoc: AngularFirestoreDocument<ScheduleInterface>;
constructor(private afs: AngularFirestore, private authService: AuthService) {
console.log('scheduleService called1');
this.schedulesCollection = this.afs.collection('schedules', ref => ref
.where('UID', '==', this.authService.currentUserId)
.orderBy('user', 'asc'));
console.log('scheduleService called2');
this.schedules = this.schedulesCollection.snapshotChanges()
.pipe(map(changes => {
console.log('scheduleService called3');
return changes.map(a => {
// not triggered on page refresh
console.log('scheduleService called4');
const data = a.payload.doc.data() as ScheduleInterface;
data.docRef = a.payload.doc.id;
return data;
});
}));
}
getSchedules() {
return this.schedules;
}
Console