Question

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

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

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

我做了以下事情：

我通过主页
我将“Test 3”添加为新生成器。
我回到主页，然后再次进入“随机生成器”页面
我从列表中删除“测试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();

}

Ionic 2，存储，“keys（）”没有正确更新？

1 个答案: