I can’t get angularfire2/firestore working with in Ionic v4 beta2.
Everything gets loaded correctly from firestore (visible in the inspector) but won’t allow slides to move. The only way to make it work is to resize the browser (I guess this triggers some ion-slides refresh)
This must come from the fact that the view is initialized before the data is returned by firestore but I thought that was the point of the async pipe.
Class declaration
export class HomePage implements OnInit {
public authUser = {} as UserModel;
public flightListObs: Observable<FlightModel[]>;
public flightListCollection: AngularFirestoreCollection<FlightModel>;
@ViewChild(Slides) slides;
constructor(
public auth: AuthService,
private router: Router,
private firestore: FirestoreService,
private afs: AngularFirestore,
) { }
ngOnInit function
async ngOnInit() {
this.getFlights();
}
getFlights function
async getFlights() {
this.auth.user.subscribe(user => {
this.authUser = user;
this.flightListCollection = this.afs.collection('flights', ref => ref.where('user', '==', user.uid));
this.flightListObs = this.flightListCollection.valueChanges();
this.flightListObs.subscribe(data => {
console.log('subscription started'); // this works
this.slides.update(); // this does not do anything
});
});
}
HTML code
<ion-slides (ionSlideDidChange)="slideChanged()">
<ion-slide class="welcome">
<ion-card> <!-- some code here --></ion-card>
</ion-slide>
<ion-slide *ngFor="let flight of flightListObs | async">
<ion-card><!-- some code here --></ion-card>
</ion-slide>
</ion-slides>
Any idea how I could get the slides working with an async firestore call?
Thank you very much