Display Angular observable with array data in ionic

Im using Angular 18 with Ionic/Angular v8.0.0 standalone component:

My Service :

getFinds(): Observable<Find[]> {
return this.http.post<Find[]>(`${this.BASE_URL}/list`, {}).pipe(
delay(500)
);
}


my feed.component.ts


ngOnInit() {
this.finds$ = this.findsService.getFinds();
}


and my feed.component.html

<ion-list>
<ng-container *ngIf="(finds$ | async) as finds; else emptyState">
<ion-item *ngFor="let item of finds" lines="none" class="ion-padding-bottom">
<ion-label>{{item.note}}asdf</ion-label>
</ion-item>
</ng-container>
<ng-template #emptyState>
<ion-item lines="none" class="ion-padding-bottom">
<ion-label>Nothing found</ion-label>
</ion-item>
</ng-template>
</ion-list>


The service returns data as seen in network tab and via console.log, yet the data is not displayed via my html component file. On the website the emptyState (Nothing found ) is displayed. Im not sure what Im doing wrong and im wondering wether its an ionic issue?

I would expect to see the result array of Finds displayed as an ionic list

Continue reading...