Question

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

page.html中

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

Page.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属性。这应该将切换设置为存储中的值。

编辑：我添加了一些代码，我已经测试并运行了。离子切换的初始值由存储器中的值设置，如果手动切换离子切换，则存储中的值会发生变化。

我建议删除离子切换组件中的[checked]绑定，并将切换的模型设置为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
  }
}

Ionic 2使用存储切换保存数据

1 个答案: