提供程序中的 ionic 3 本机存储

Question

我在提供程序中植入了Cordova模块"本机存储"。但是我无法发送和检索存储在本机存储中的变量的值。这是我的代码：

页面参数.html

<ion-header>
  <ion-navbar>
    <ion-title>Paramétres</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
    <ion-list-header>Connection Serveur</ion-list-header>
        <ion-item-group margin-bottom>
          <ion-item>
            <ion-input type="text" placeholder="Adresse du serveur" [(ngModel)]="linkServer"></ion-input>
            </ion-item>
            <ion-item>
            <ion-input type="text" placeholder="Nom d'utilisateur" [(ngModel)]="user"></ion-input>
            </ion-item>
            <ion-item>
            <ion-input type="text" placeholder="Mot de passe" [(ngModel)]="password"></ion-input>
          </ion-item>
        </ion-item-group>
        <ion-list-header>Options</ion-list-header>
        <ion-item-group margin-bottom>
        <ion-item>
                <ion-label>Message de bienvenue</ion-label>
                <ion-toggle [(ngModel)]="bienvenue"></ion-toggle>
            </ion-item>
            <ion-item>
                <ion-label>Notification</ion-label>
                <ion-toggle [(ngModel)]="notification"></ion-toggle>
            </ion-item>
            <ion-item>s
                <ion-label>Vibration</ion-label>
                <ion-toggle [(ngModel)]="vibration"></ion-toggle>
            </ion-item>
        </ion-item-group>
        <button ion-button outline color="dark" style="width: 100%" (tap)="aPropos()">A Propos</button>
    <br />
    <button ion-button full color="dark" (tap)="this.paramService.savePref()">Enregistrer</button>
    <button ion-button full color="dark" (tap)="this.paramService.loadPref()">Charger</button>
    </ion-list>
</ion-content>

页面参数.ts

import { Component } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';
import { ParamProviders } from '../../providers/paramProviders';
/**
 * Generated class for the ParameterPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@Component({
  selector: 'page-parameter',
  templateUrl: 'parameter.html',
})
export class ParameterPage {
  constructor(public navCtrl: NavController, public navParams: NavParams, private alertCtrl: AlertController, public paramService: ParamProviders) {
  this.paramService.linkServer;
  this.paramService.user;
  this.paramService.password;
  this.paramService.bienvenue;
  this.paramService.notification;
  this.paramService.vibration;
  }

  ionViewDidLoad() {
  }
  // ionViewWillEnter() {
  //   this.paramService.loadPref()
  // }
  // ionViewWillLeave() {
  //   this.paramService.preferences()
  // }
  aPropos() {
    let alert = this.alertCtrl.create({
      title: 'A Propos',
      message: '<b><u>Created by :</u></b> Mezergues Romain et Thierry.<br /><b><u>Verson :</b></u> 1.00<br /><b><u>Site web :</b></u> <a>http://hackeet.com</a><br /><b><u>Email:</u></b> <email>[e-mail]</email>',
      buttons: ['Ok']
    });
    alert.present()
  }

}

paramProvider.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import { NativeStorage } from '@ionic-native/native-storage';
/*
  Generated class for the PeopleSearch provider.
  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class ParamProviders {
    linkServer: string ;
    user: string;
    password: string;
    bienvenue: boolean;
    notification: boolean;
    vibration: boolean;
  constructor(public http: Http, private nativeStorage: NativeStorage) {
  }
public savePref(): void {
    this.nativeStorage.setItem('storage_pref', {
        linkServer: this.linkServer,
        user: this.user,
        password: this.password,
        bienvenue: this.bienvenue,
        notification: this.notification,
        vibration: this.vibration
    })
    .then(
      () => console.log(this.linkServer),
      error => console.error('Error storing item', error)
    );
}
public loadPref():void {
  this.nativeStorage.getItem('storage_pref')
    .then(
      data => {
        this.linkServer = data.linkServer;
        this.user = data.user;
        this.password = data.password;
        this.bienvenue = data.bienvenue;
        this.notification = data.notification;
        this.vibration = data.vibration;
      },
      error => console.error(error)
  );
}
  // load() {
  //   if (this.data1) {
  //     return Promise.resolve(this.data1);
  //   }
  //   // Dont have the data yet
  //   return new Promise(resolve => {
  //     this.http.get('./assets/json/parameter.json')
  //       .map(res => res.json())
  //       .subscribe(data => {
  //         this.data1 = data;
  //         resolve(this.data1);
  //       });
  //   });
  // }  
}

我在浏览器上或本机编译时没有错误。我希望在填写表单时，这些值将被传输并保存在"paramProviders.ts"中找到的本机存储中，然后检索保存的值并在其他页面上使用它们。

亲切。

Answer 1

你必须像下面这样改变你的[（ngModel）]

<ion-item>
    <ion-input type="text" placeholder="Adresse du serveur" [(ngModel)]="this.paramService.linkServer"></ion-input>
</ion-item>

您已将其添加到模型this.paramService. 您已经添加了 for 按钮。

您也可以从参数页面中删除以下内容

this.paramService.linkServer;
this.paramService.user;
this.paramService.password;
this.paramService.bienvenue;
this.paramService.notification;
this.paramService.vibration;