How can I resolve the problem of the loading animation not appearing?
Below is the code snippet: HTML
<div *ngIf="tempThermometer | async as temp; else loading">
<ng-container *ngIf="temp.length !== 0; else noItems">
<div *ngFor="let item of temp">
{{temp.sensor}}</div>
</ng-container>
<ng-template #noItems>No Items!</ng-template>
</div>
<ng-template #loading>loading animation...</ng-template>
TYPESCRIPT
tempThermometer = new BehaviorSubject<any>([]);
async retrieveData() {
this.subscription = await this.global
.getData(`/conditions/latest`)
.pipe(take(1))
.subscribe((res: any) => {
this.tempThermometer.next(Object.values(res['data'].map((obj: any) => {
return {
...obj,
spinning: true
};
})));
console.log(this.tempThermometer.value);
});
}
I am trying to show the loading animation while fetching data.
The issue I am facing is that the loading animation does not display automatically; instead, it instantly shows "No Data!".