javascript - Ionic 2 Toggle 使用 Storage 保存数据

Question

我有一个非常简单的问题，我正在构建一个应用程序，其中有一个带有切换输入的设置页面，供用户打开和关闭某些警报。我的问题是如何保存切换值，以便当有人关闭应用程序或导航到另一个页面时切换状态不应该丢失并且当前切换应该反射(reflect)在 html 中。目前我正在使用 cordova-sqlite-storage 插件来存储切换值。

页面.html

<ion-item>
    <ion-label>300 Units</ion-label>
    <ion-toggle [(ngModel)]="AlertOn200"  [checked]="toggleStatus" (ionChange)="Change_Toggle_on_200();"></ion-toggle>
  </ion-item>

页面.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';
@Component({
  selector: 'page-page2',
  templateUrl: 'page2.html'
})
export class Page2 {
  AlertOn200:any;
  toggleStatus:any;
  val:any;  
  constructor(public storage: Storage) {      
     storage.ready().then(() => {
     // get a key/value pair
      storage.get('toggleStatus').then((val) => {
      this.val=val;
      console.log('Status = ', val);
       })
     });  
  }  
  Change_Toggle_on_200() {
  if(this.AlertOn200== true){
      this.storage.set('toggleStatus','true');         
       console.log("isAlertOn200 = "+this.toggleStatus);   
   }
   else{
   this.storage.set('toggleStatus','false');
   console.log("isAlertOn200 = "+this.toggleStatus);
    }
  }

Answer 1

在 storage.ready() 上，您应该在类中设置 AlertOn200 和/或 toggleStatus 属性，而不是 val 属性。这应该将切换设置为存储中的值。

编辑:我在下面添加了一些代码，我已经测试过并且可以正常工作。ion-toggle 的初始值由存储中的值设置，如果您手动切换 ion-toggle，则存储中的值会发生变化。

我建议删除 ion-toggle 组件中的 [checked] 绑定(bind)，并将切换模型设置为 toggleStatus，如下所示:

<ion-toggle [(ngModel)]="toggleStatus" (ionChange)="Change_Toggle_on_200();"></ion-toggle>

如果您随后实现以下类:

export class Page1 {
  toggleStatus: any;

  constructor(public navCtrl: NavController, public storage: Storage) {
    storage.ready().then(() => {
      storage.get('toggleStatus').then((val) => {
        console.log(`Setting status from storage to '${this.toggleStatus}'`);
        this.toggleStatus = val; // <-- Just set this.toggleStatus to the value from storage, this will make the ion-toggle change value from default to value from storage
      })
    });
  }

  Change_Toggle_on_200() {
    console.log(`changing toggleStatus to '${this.toggleStatus}'`);
    this.storage.set('toggleStatus', this.toggleStatus); // <-- note we can just set the current value of this.toggleStatus as this changes with the toggle
  }
}