Ionic 2，Storage，「keys（）」不能正確更新？

Question

我剛開始使用學習Ionic 2來創建個人使用的應用程序（我非常喜歡新手）。在爲自定義隨機生成器創建應用程序時，我碰到了一個小問題（但令人討厭）。

該設置是一個主要的「隨機生成器」頁面，每個單獨的「隨機生成器」的離子列表。隨機生成器被存儲爲一個鍵，值（NameOfGenerator，dataInJSON）對，在ionics建議的「存儲」模塊中。所以我的想法是通過存儲中的「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" ] 

下面我展示了頁面中相關代碼snipps的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(); 

}