イオン2、ストレージ、 "keys（）"は正しく更新されませんか？

Question

私はちょうど個人的な使用のためのアプリを作成することを願ってIonic 2を学習し始めました（私は非常に新人です）。カスタムランダムジェネレータ用のアプリケーションを作成するとき、私はマイナーな（しかし迷惑な）問題に遭遇しました。

セットアップは、それぞれの「ランダムジェネレータ」のイオンリストを持つメインの「ランダムジェネレータ」ページです。ランダムジェネレータは、キー、値（NameOfGenerator、dataInJSON）のペアとして、 "ストレージ"モジュールを提案するイオニクスとして格納されます。ですから私の考えは、Storageの "keys（）"関数を使ってイオンリストの名前を取得することでした。これは、ジェネレータを追加または削除するたびに "keys（）"コマンドを再実行することで更新されます。削除には効果的ですが、追加のために自動的には更新されません。

私はコンソール出力を見ましたが、更新機能（updateGenLst（））が実行されているようですが、 "keys（）"関数は新しく追加されたキー/値のペアを見つけられないようです。しかし、私がページに再入力すると、 "keys（）"関数はコンストラクタを介してそれを見つけるように見えます。

私は次のことをやった：

1. 私は「乱数発生器」ページを入力して、ホーム・ページ
2. を経由して、私は新しい発電機として「テスト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" ] 
   

   ：

3. は、私は再び
4. 私は、このコンソール出力を与えたリスト

から「テスト3」を削除してから、「乱数発生器」ページにホームページに戻ります以下では、関連するコードスニペットのjavascriptとhtmlの両方をページから紹介します。

これはファイル私page.tsの関連する部分である：あなたが updation後にキーを印刷したい場合は、

.... 
<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

：ここ

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側から関連する部分ですguarenteedの場所は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(); 

}