Question

我在离子2中遇到的一个反复出现的问题是它的存储服务。我已成功设置并检索存储的数据。但是，当我存储某些东西时，除非我刷新页面/应用程序，否则它在其他页面上是不可访问的。

示例一：编辑联系人

我推送到编辑联系人页面，进行更改，然后保存编辑。 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

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

例如，阅读本文：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在this.items引用的数组上进行迭代（ngFor）？如果是，请直接更新this.items[this.id]的属性，而不是重新初始化它。

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

（顺便说一句，我建议与您的财产命名保持一致：Id和Name，或ID和名称（大写字母很重要！）。）

您的＆＃34;列表＆＃34;如果未更改对正在使用的对象的引用，则将始终刷新视图。唯一的例外是在给第三方库的回调中进行的更新。在这种情况下，你可以使用NgZone来强迫＆＃34;强迫＆＃34; Angular将更新考虑在内。

另外，请看看亚历山大关于Observable的伟大建议。

与离子2存储服务

2 个答案: