Below is the HTML code:
<ion-list>
<ion-radio-group>
<ion-item class="ion-no-padding" *ngFor="let service of services | async">
<ion-label>
<ion-grid>
<ion-row>
<ion-col size="12">
{{ service.name }}
</ion-col>
</ion-row>
</ion-grid>
</ion-label>
<ion-radio slot="end" value="{{ service.id }}"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
and my page.ts contains the following code:
services: Observable<Service[]>;
// db service connecting to firebase
ngOnInit() {
this.services = this.db.getServicesFromVenue(this.routeParams.venueID);
}
Service code:
getServicesFromVenue(venueID: string): Observable<Service[]> {
this.serviceCollection = this.afs.collection<Service>('services', ref => ref.where('venue', '==', venueID));
return this.services = this.serviceCollection
.snapshotChanges()
.pipe(
map(actions => {
return actions.map(a => {
const data = a.payload.doc.data();
const id = a.payload.doc.id;
return { id, ...data };
});
})
);
}
Everything works well, but I am struggling to display a message "no services" when there are no results. I have tried various methods but nothing seems to work:
<ion-list *ngIf="services | async as service; else noServicesBlock">
This code snippet gives me no output. Any help would be appreciated. Thank you in advance!