web-dev-qa-db-fra.com

Impossible de résoudre tous les paramètres pour le stockage: (?)

Je reçois des valeurs d'un modal et je veux stocker et l'obtenir en utilisant le stockage local dans le projet ionic2 angular2. Mon code est donné ci-dessous. Cela donne l'erreur suivante: 

 enter image description here

Dans la page home.ts, j'ai importé du stockage

import { Storage } from '@ionic/storage';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers :[
  Storage
]
})

export class HomePage {
 private DistanceUnit: string;
 private selectedRadious : number;

 constructor(public navCtrl: NavController
          public modalCtrl: ModalController,
          public storage: Storage) {


}

presentModal() {
this.storage.get('distUnit').then((val) => {
  console.log('Your distUnit is', val);
  this.DistanceUnit = val;     
})
.catch(err=>{
  console.log('Your distUnit dont exist: ' + JSON.stringify(err));
  this.DistanceUnit = 'Meters';
});

 this.storage.get('SetRadious').then((val) => {
  console.log('Your SetRadious is', val);
  this.selectedRadious = val;
})
 .catch(err=>{
  console.log('Your SetRadious dont exist: ' + JSON.stringify(err));
    this.selectedRadious = 500;
});


let obj = {selectedRadious: this.selectedRadious, DistanceUnit: this.DistanceUnit};
let myModal = this.modalCtrl.create(SettingModalPage, obj);

myModal.onDidDismiss(data => {
  console.log('modal value: '+data.DistanceUnit)
  this.DistanceUnit = data.DistanceUnit;
  this.selectedRadious = data.selectedRadious;

 this.storage.set('distUnit', this.DistanceUnit);
 this.storage.set('SetRadious', this.selectedRadious);
});

myModal.present();
}
}

Dans le fichier app.module.ts,

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { Storage } from '@ionic/storage';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DetailsPage } from '../pages/details/details';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TypeApi } from '../shared/shared';
import { PlaceDetailService } from '../shared/shared';
import { LaunchNavigator, LaunchNavigatorOptions } from '@ionic- native/launch-navigator';
import { SettingModalPage } from '../pages/setting-modal/setting-modal';

@NgModule({
  declarations: [
  MyApp,
  HomePage,
  DetailsPage,
  SettingModalPage

],
imports: [
  IonicModule.forRoot(MyApp),
  HttpModule
],
bootstrap: [IonicApp],
  entryComponents: [
  MyApp,
  HomePage,
  DetailsPage,
  SettingModalPage
],
providers: [
  Storage,
  TypeApi,
  PlaceDetailService,
  LaunchNavigator,
  StatusBar,
  SplashScreen,
  {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
angulartypescriptionic2
16
alka vaghela

À partir de @ionic/storage version - 2.0.0, , Apportez les modifications ci-dessous:

app.module.ts 

import { IonicStorageModule } from '@ionic/storage';

//..
@ngModule({

imports: [
  IonicModule.forRoot(MyApp),
  HttpModule,
  IonicStorageModule.forRoot(),
]

Remarque: vous devez supprimer import { Storage } from '@ionic/storage';

Vérifiez les notes de version ici

33
Suraj Rao

J'ai rencontré le même problème en suivant ce tut cool. Si vous choisissez de suivre le tutoriel, assurez-vous d’avoir installé les plugins Cordova listés au début de la vidéo:

https://www.youtube.com/watch?v=Cnj9fQCyflY

http://technotip.com/5171/ionic-storage-ionic-2/

et voici comment vous résolvez l'erreur:

Dans Ionic 3 ...

De l'URL ci-dessous:

https://ionicframework.com/docs/storage/

Premièrement, si vous souhaitez utiliser SQLite, installez le plugin cordova-sqlite-storage:

ionic cordova plugin add cordova-sqlite-storage

Ensuite, installez le package (fourni par défaut pour les applications Ionic> Ionic V1):

npm install --save @ionic/storage

Ensuite, ajoutez-le à la liste des importations dans votre déclaration NgModule (par exemple, dans src/app/app.module.ts):

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [      
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // ...
  ],
  providers: [
    // ...
  ]
})
export class AppModule {}

Enfin, insérez-le dans l’un de vos composants ou pages:

import { Storage } from '@ionic/storage';

export class MyApp {
  constructor(private storage: Storage) { }

  ...

  // set a key/value
  storage.set('name', 'Max');

  // Or to get a key/value pair
  storage.get('age').then((val) => {
    console.log('Your age is', val);
  });
}
4
iOSAndroidWindowsMobileAppsDev

J'ai eu ce problème moi-même. Tout d’abord, vous devez voir ceci update .

Fondamentalement, vous devez:

  • Supprimer Storage de votre providers dans app.module.ts
  • import { IonicStorageModule } from '@ionic/storage' au lieu de import { IonicStorage } from '@ionic/storage' dans app.module.ts
  • Ajoutez IonicStorageModule.forRoot() au tableau imports dans app.module.ts

Après cela cependant, j'avais toujours l'erreur (impossible de résoudre tous les paramètres de stockage: (?)). J'ai découvert que j'utilisais Storage en tant que fournisseur dans un composant. Vous devez l'enlever. Voir ci-dessous:

@Component({
  selector: 'login',
  templateUrl: 'login.component.html',
  providers: [
    AuthService,
    // Storage, <-- you need to remove this
    JwtHelper
  ]
})
2
Karl Patrick Espiritu

Vous devez déplacer le code où vous accédez aux valeurs d'une promesse résolue vers la .then() de cette promesse. Comme il s'agit d'une opération asynchrone, au moment où vous l'utilisez, il est possible qu'elle ne soit pas disponible.

Par exemple. cela pourrait fonctionner:

presentModal() {
    this.storage.get('distUnit').then((val) => {
        console.log('Your distUnit is', val);
        this.DistanceUnit = val;
        this.storage.get('SetRadious').then((val) => {
            console.log('Your SetRadious is', val);
            this.selectedRadious = val;

            this.modalCreator();
        })
        .catch(err=>{
            console.log('Your SetRadious dont exist: ' + JSON.stringify(err));
            this.selectedRadious = 500;
            this.modalCreator();
        });
    })
    .catch(err=>{
        console.log('Your distUnit dont exist: ' + JSON.stringify(err));
        this.DistanceUnit = 'Meters';

        this.storage.get('SetRadious').then((val) => {
            console.log('Your SetRadious is', val);
            this.selectedRadious = val;

            this.modalCreator();
        })
        .catch(err=>{
            console.log('Your SetRadious dont exist: ' + JSON.stringify(err));
            this.selectedRadious = 500;
            this.modalCreator();
        });
    });
}

modalCreator(){
    let obj = {selectedRadious: this.selectedRadious, DistanceUnit: this.DistanceUnit};
    let myModal = this.modalCtrl.create(SettingModalPage, obj);

    myModal.onDidDismiss(data => {
        console.log('modal value: '+data.DistanceUnit)
        this.DistanceUnit = data.DistanceUnit;
        this.selectedRadious = data.selectedRadious;

        this.storage.set('distUnit', this.DistanceUnit);
        this.storage.set('SetRadious', this.selectedRadious);
    });
    myModal.present();
}

Si vous lisez attentivement le code, vous saurez que j'ai géré tous les cas pour obtenir les deux paramètres et que l'un d'eux échoue. Vérifie et tiens-moi au courant.

1
Sagar Kulkarni

La réponse de suraj apporta la solution décisive.

J'ai eu le même problème. Dans app.module.ts j'avais les deux spécifiés: import {IonicStorageModule} from '@ionic/storage'; et: import {Storage} from '@ionic/storage'. Lorsque je ne pouvais pas résoudre le problème, j’ai installé: npm install @ ionic/storage . J'ai supprimé: import {Storage} from '@ionic/storage' de app.module.ts , et je n'ai laissé que ceci: import {IonicStorageModule} from '@ionic/storage'; Après cela, le problème a été résolu.

0
peter70