提供者中的离子3本机存储 [英] ionic 3 native-storage in a provider
本文介绍了提供者中的离子3本机存储的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在提供商中植入了cordova模块native storage。但我无法发送和检索存储在本机存储中的变量值。这是我的代码：
I implanted the cordova module "native storage" in a provider. But I can not send and retrieve the values of variables stored in native storage. Here is my code:
Page parameter.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>
Page Parameter.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>r.mezergues@protonmail.ch</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中的本机存储中，然后检索保存的值并在其他页面上使用它们。
I do not have an error when compiling on the browser or natively. I wish that when the form is filled, the values will be transmitted and saved in native-storage found in "paramProviders.ts", and then retrieve the saved values and use them on other pages.
亲切。
推荐答案
你必须改变你的[（ngModel）]，如下所示
You have to change your [(ngModel)] like below one
<ion-item>
<ion-input type="text" placeholder="Adresse du serveur" [(ngModel)]="this.paramService.linkServer"></ion-input>
</ion-item>
你已经用模型 this.paramService添加了这个。您已经添加了按钮。
You have add this with model this.paramService. You already added for button.
您也可以从param page.ts中删除以下内容
Also you can remove below like from param page.ts
this.paramService.linkServer;
this.paramService.user;
this.paramService.password;
this.paramService.bienvenue;
this.paramService.notification;
this.paramService.vibration;
这篇关于提供者中的离子3本机存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
