I have a scenario where I am trying to load JSON data from storage and display it on the HTML template of my page. However, when I try to do this, I encounter errors suggesting that the information is not yet available upon entering the page.
I'm starting to think that I may have misunderstood something. Is there a way to make a synchronized call to Ionic Storage instead of an asynchronous one? My goal is to check if a user profile is stored on the device, and if it's not, redirect back to the login screen. Unfortunately, it seems like the call to Ionic Storage takes too long and isn't resolved by the time the page loads.
Here is part of my code:
private user:User;
constructor(private storage: Storage) {
storage.get('user').then(data => {
this.user = data;
});
}
And here is how I am trying to display the data in my HTML template:
<ion-content padding>
<div>
<p>Welcome <b>{{user.name}}</b></p>
</div>
</ion-content>
But, as I mentioned earlier, this approach gives me an error indicating that user.name is undefined. Using the ngIf directive to wait for the promise to resolve solves the issue, but I feel like I might be missing something fundamental here.
<ion-content padding>
<div *ngIf="user">
<p>Welcome <b>{{user.name}}</b></p>
</div>
</ion-content>
So, my question is: How can I ensure that the data fetched from Ionic Storage is available when the page is loaded or entered?