Ionic 2，存储，“keys()”没有正确更新？

Question

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

设置是一个主“随机发生器”页面，其中包含每个“随机发生器”的离子列表。随机生成器存储为 ionics 建议的“存储”模块中的键、值（NameOfGenerator，dataInJSON）对。所以我的想法是通过 Storage 中的“keys()”函数获取离子列表的名称。每次添加或删除生成器时，都会通过重新运行“keys()”命令来更新。它适用于删除，但不会自动更新添加。

我查看了控制台输出，似乎 update-function(updateGenLst()) 运行，但“keys()”函数似乎没有找到新添加的键/值对。但是，当我重新进入页面时，“keys()”函数似乎通过构造函数找到了它。

我做了以下事情：

1. 我通过主页进入“随机发生器”页面
2. 我将“Test 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();

}