无法解析存储的所有参数：(?)

Question

我正在从模式中获取值，我想在 ionic2 angular2 项目中使用本地存储来存储和获取它。我的代码如下。它给出以下错误：

在

home.ts

页面，我导入了storage

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();
}
}

在

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

Answer 1

对于 3.0.0 版本，角度特定存储可以在

@ionic/storage-angular

包中找到。

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

来自

@ionic/storage version - 2.0.0

， 进行以下更改：

app.module.ts

import { IonicStorageModule } from '@ionic/storage';//for v 2.0.0 and below 3.0.0


//..
@ngModule({

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

注意：需要去掉

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

查看发行说明在这里

Answer 2

我在遵循这个很酷的教程时遇到了同样的问题。如果你应该选择跟随 tut，确保你已经安装了视频开头列出的 cordova 插件：

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

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

这就是您解决错误的方法：

在离子 3...

来自以下网址：

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

首先，如果您想使用 SQLite，请安装 cordova-sqlite-storage 插件：

ionic cordova plugin add cordova-sqlite-storage

接下来，安装包（Ionic 应用程序默认安装 > Ionic V1）：

npm install --save @ionic/storage

接下来，将其添加到您的

NgModule

声明中的导入列表中（例如，在

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

最后，将其注入到您的任何组件或页面中：

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);
  });
}

Answer 3

我自己也遇到过这个问题。首先，你需要看到这个update.

基本上你需要：

• 从

  Storage

  中删除

  providers

  app.module.ts

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

  代替

  import { IonicStorage } from '@ionic/storage'

  在

  app.module.ts

• 将

  IonicStorageModule.forRoot()

  添加到

  imports

  中的

  app.module.ts
数组

虽然在那之后，我仍然有错误（无法解析存储的所有参数：（？））。我发现我在组件中使用

Storage

作为提供者。您需要将其删除。见下文：

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

Answer 4

您需要将访问已解决承诺中的值的代码移动到该承诺的

.then()

中。因为，它是异步操作，当你使用它时，它可能不可用。

例如这可以工作：

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();
}

如果你仔细阅读代码，你会知道我已经处理了所有获取两个参数的情况，以及其中一个失败的情况。检查一下，让我知道。

Answer 5

除了 Suraj 的回答之外，我发现我需要在传递选项的构造函数中显式创建 Storage 对象，例如

	this.storage=new Storage({name:"__mydb"});

所以我没有在我的组件的提供者中包含“存储”，也没有在构造函数中包含

Answer 6

suraj的回答带来了决定性的解决方案

我有同样的问题。在 app.module.ts 中，我同时指定了：

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

和：

import {Storage} from '@ionic/storage'

。 当我无法解决问题时，我安装了：npm install @ionic/storage。我已经从

app.module.ts

中删除了：import {Storage} from '@ionic/storage'，只留下了这个：

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

之后问题就解决了。