离子 2、存储"keys()"无法正确更新？

Question

我刚开始学习Ionic 2，希望能创建供个人使用的应用程序(我是个新手)。在为自定义随机生成器创建应用程序时，我遇到了一个小问题(但很烦人)。

该设置是一个主要的"随机生成器"页面，其中包含每个单独的"随机发生器"的离子列表。随机生成器作为密钥、值(NameOfGenerator，dataInJSON)对存储在ionics建议的"存储"模块中。所以我的想法是通过Storage中的"keys()"函数来获取离子列表的名称。这是通过每次添加或删除生成器时重新运行"keys()"命令来更新的。它可以很好地删除，但不会自动更新以添加。

我已经查看了控制台的输出，它似乎运行了更新函数(updateGenLst())，但"keys()"函数似乎找不到新添加的键/值对。然而，当我重新进入页面时，"keys()"函数似乎是通过构造函数找到的。

我做了以下事情：

1. 我通过主页进入"随机生成器"页面
2. 我添加了"测试3"作为一个新的生成器
3. 我回到主页，然后再次进入"随机生成器"页面
4. 我从列表中删除了"测试3">

哪个给了这个控制台输出：

1. Found in storage Array [ "Test 1", "Test 2" ]  main.js:35706:13
2. Hello AddGenPage Page  main.js:96550:9
WARN Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (474002 px). Occurrences of will-change over the budget will be ignored.  localhost:8100
2. Updateded storage Array [ "Test 1", "Test 2" ]  main.js:35720:13
WARN Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.  localhost:8100
3. Found in storage Array [ "Test 1", "Test 2", "Test 3" ]  main.js:35706:13
4. Removed undefined  main.js:35725:13
4. Updateded storage Array [ "Test 1", "Test 2" ]

下面我展示了页面中相关代码片段的javascript和html端。

这是我的page.ts文件的相关部分：

export class RandomGenerators {
public generators = [];
constructor(public navCtrl: NavController, public modalCtrl: ModalController, public storage: Storage) {
storage.keys().then((val) => {
this.generators = val;
})
}
ionViewDidLoad() {}
updateGenLst() {
this.storage.keys().then((val) => {
this.generators = val;
console.log('Updateded storage', val)
})
}
rmGen(gen){
this.storage.remove(gen).then((val) => {
console.log('Removed ' + val + "");
});
this.updateGenLst();
}
addGen() {
let addModal = this.modalCtrl.create(AddGenPage);
addModal.onDidDismiss((gen) => {
if(gen) {
this.saveGen(gen);
this.updateGenLst();
}
});
addModal.present();
}
saveGen(gen){
this.storage.set(gen.name,gen);
}

以下是html方面的相关部分：

....
<ion-buttons end>
<button ion-button icon-only (click)="addGen()">
<ion-icon name="add-circle"></ion-icon>
</button>
</ion-buttons>
....
<ion-list>
<ion-item-sliding *ngFor="let gen of generators">
<ion-item>
{{gen}}
</ion-item>
<ion-item-options>
<button danger (click)="rmGen(gen)"><ion-icon name="trash"></ion-icon> Delete</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>

Answer 1

如果要在更新后打印密钥，则保护位置位于then内。

例如：

rmGen(gen){
this.storage.remove(gen).then((val) => {
console.log('Removed ' + val + "");
this.updateGenLst();//here
});
}

此外，this.storage.set也将返回一个承诺。所以在你的addGen函数中，

this.saveGen(gen).then((data)=>{//saveGen should return the storage.set call
this.updateGenLst();

}