Ionic 2, Storage, "keys()" не обновляется должным образом?

Question

Я только начал использовать Ionic 2 в надежде создать приложения для личного использования (я очень новичок). Я столкнулся с незначительной (но раздражающей) проблемой при создании приложения для пользовательских случайных генераторов.

Настройка - это главная страница «Случайные генераторы» с ионным списком каждого отдельного «случайного генератора». Случайные генераторы хранятся в виде пары ключ, значение (NameOfGenerator, dataInJSON) в ионной системе, предлагаемой модулем «Хранение». Поэтому моя идея состояла в том, чтобы получить имена для ионного списка с помощью функции «keys()» в Storage. Это обновляется путем повторного запуска команды «keys()» каждый раз, когда я добавляю или удаляю генератор. Он отлично работает для удаления, но он не обновляется автоматически для добавления.

Я посмотрел на вывод консоли, и похоже, что функция update (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

Если вы хотите напечатать ключи после Updation, то Место нахождения 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(); 

}