プロバイダのイオン3ネイティブストレージ

Question

私は、プロバイダにコードバスモジュール「ネイティブストレージ」を移植しました。しかし、私はネイティブストレージに格納されている変数の値を送ったり取得したりすることはできません。ここに私のコードです：

<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> 

ページParameter.ts

ページparameter.html

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"にあるネイティブストレージに転送されて保存され、保存された値を取得して他のページで使用されることを願っています。

コードレス。

Answer 1

あなたは1

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

の下に、あなたはすでにボタンの追加this.paramService.モデルでこれを追加する持っているようにあなたの[（ngModel）]を変更する必要があります。

また、あなたはのparam page.ts

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