无法解析存储的所有参数:(？)

Question

我从模态中获取值,我想在ionic2 angular2项目中使用本地存储来存储和获取它.我的代码如下.它给出以下错误:

在home.ts页面中,我已导入存储

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

从@ionic/storage version - 2.0.0,进行以下更改:

app.module.ts

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

//..
@ngModule({

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

注意:您需要删除 import { Storage } from '@ionic/storage';

在此查看发行说明

Answer 2

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

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

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

这是您解决错误的方法：

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