CODEWITHSUNDEEP
ionic2storage
Dansmith12
Dansmith12

Reputation: 143

Accessing storage synchronously with ionic 2 storage service

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();
  }
  }

Upvotes: 0

Views: 729

Answers (2)

VinceOPS
VinceOPS

Reputation: 2720

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.

Upvotes: 1

Alexander Trakhimenok
Alexander Trakhimenok

Reputation: 6278

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

Upvotes: 1

Related Questions