使用 ionic 2 存储服务同步访问存储

Question

我在使用 ionic 2 时遇到的反复出现的问题之一是它的存储服务。我已成功设置和检索存储的数据。然而，当我存储一些东西时，它在其他页面上是不可访问的，除非我刷新 page/application。

示例一：编辑联系人

我推送到编辑联系人页面，进行更改，然后保存编辑。 saveEdits 成功地更改了正确的联系人，但未能更新联系人列表，直到应用程序被刷新。

HTML:

<button (click)="saveEdits(newName, newPostCode)"ion-button round>Save Edits</button>

打字稿：

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

示例二：访问另一个页面上的联系人

在另一个页面上，我遍历联系人并将它们显示在无线电警告框列表中。再次，联系人显示成功，但是当我在添加联系人页面添加联系人时，新联系人没有出现在收音机提示框列表中。

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

您应该使用 Angular 个具有 Observable 属性的提供商来通知订阅者（其他页面和组件）有关更改。

例如阅读这篇文章：http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/

这方面的资料很多：https://www.google.com/search?q=angular+provider+observable

Answer 2

您正在更改变量指向的引用：

this.items[this.id] = {"id": this.id, "Name": newName, "PostCode": newPostCode};

我假设您的 LIST 正在迭代 (ngFor) this.items 引用的数组？如果是，直接更新 this.items[this.id] 的属性，而不是重新初始化它。

this.items[this.id].Name = newName;
this.items[this.id].PostCode = newPostCode;

（顺便说一下，我建议与您的属性命名保持一致：ID 和名称，或者 id 和名称（大写字母很重要！））。

如果对正在使用的对象的引用未更改，您的 "list" 视图将始终刷新。唯一的例外是在给第三方库的回调中进行的更新。在这种情况下，您可以使用 NgZone 来 "force" Angular 来考虑更新。

另外，看看 Alexander 关于 Observable 的重要建议。

使用 ionic 2 存储服务同步访问存储

Accessing storage synchronously with ionic 2 storage service

ionic2

storage