After updating my Ionic Storage values, they are not showing up on the HTML page until I reload it. I have researched similar issues faced by others, but the solutions I found either do not work or are no longer applicable due to changes in the Ionic version. For example, the Event system in Ionic.
The HTML code displays the Name, and two dates:
<ion-list>
<div *ngFor="let data of data2">
<ion-item lines="none">
<ion-label text-left>
Fruit Name:
</ion-label>
<ion-label text-right>
{{data.FruitName}}
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label text-left>
Install Date:
</ion-label>
<ion-label text-right>
{{data.installTime}}
</ion-label>
</ion-item>
<ion-item>
<ion-label text-left>
Remove Date:
</ion-label>
<ion-label text-right>
{{data.removeTime}}
</ion-label>
</ion-item>
</div>
</ion-list>
.TS file
import {ActivatedRoute} from '@angular/router';
import { Storage } from '@ionic/storage';
export class SummaryComponent implements OnInit {
//My Variables
data2;
_idx;
constructor(
private route: ActivatedRoute,
private storage: Storage,
) { }
ngOnInit() {
this.route.params.subscribe(
params => {
/*Update Variables here*/
this._idx = Temperature.__idx;
this.storage.ready().then(() => {
this.storage.get(this._idx).then(data=>{
//if data exists
if(data)
{
console.log("data read");
this.data2 = data;
console.log(data);
}
else
{
console.log("data is empty");
this.data2 = [];
}
});
});
});
}
}
Issue observed when loading the routing page for the first time:
https://i.sstatic.net/eJ4him.png
When changing routing pages and then returning to the original: