Accessing storage synchronously with ionic 2 storage service - ionic2

Question

One of the recurring problems i've been having with ionic 2 is it's storage service. I have successfully set and retrieved stored data. However, when i store something, it is inaccessible on other pages unless i refresh the page/application.
Example one: Editing a contact
I push to an edit contact page, make changes, then saveEdits. saveEdits successfully makes the change to the right contact but fails to update the contact list UNTIL the application is refreshed.
HTML:
<button (click)="saveEdits(newName, newPostCode)"ion-button round>Save Edits</button>
TypeScript:
saveEdits(newName, newPostCode){
console.log("saveid"+this.id);
this.name = newName; //saves property
this.postcode = newPostCode; //saves property
this.items[this.id] = {"id": this.id, "Name": newName, "PostCode": newPostCode};
this.storage.set('myStore',this.items);
//this.navCtrl.pop(ContactPage);
}
Example two: Accessing contacts on another page
On another page i iterate through contacts and display them in a radio alert box list. Again, the contacts are displayed successfully, but when I add a contact on the add contact page, the new contact does not appear on the radio alert box list.
addDests(){
console.log('adddests');
{
let alert = this.alertCtrl.create();
alert.setTitle('Choose Friend');
for(let i = 0; i<this.items.length; i++){
console.log('hello');
alert.addInput({
type: 'radio',
label: this.items[i].Name,
value: this.items[i].PostCode,
checked: false
});
}
alert.addButton('Cancel');
alert.addButton({
text: 'OK',
handler: data => {
console.log(data);
}
});
alert.present();
}
}

Answer 1

You're changing the reference the variable is pointing to:
this.items[this.id] = {"id": this.id, "Name": newName, "PostCode": newPostCode};
I assume that your LIST is iterating (ngFor) over the array referenced by this.items? If yes, update directly the properties of this.items[this.id] instead of re-initializing it.
this.items[this.id].Name = newName;
this.items[this.id].PostCode = newPostCode;
(By the way, I'd recommend to be consistent with your property naming: either Id and Name, or id and name (capital letters matter!)).
Your "list" view will always be refreshed if the references to the objects being used are not changed. The only exception would be an update made in a callback given to a third-part library. In that case, you can use NgZone to "force" Angular to take the update into account.
Also, have a look at Alexander's great advice about Observable.

Answer 2

You should use Angular provider(s) with Observable property to notify subscribers (other pages & components) about changes.
For example read this article: http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/
There are a lot of information on this: https://www.google.com/search?q=angular+provider+observable