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

检查发行说明here

Answer 2

我在跟随这个很酷的啧啧时遇到了同样的问题。如果你选择跟随tut，请确保你已经安装了视频开头列出的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插件：

npm install --save @ionic/storage

接下来，安装软件包（默认情况下是Ionic应用程序＆gt; Ionic V1）：

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

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

delete from data
where 
    (
    -- year of `created_at` is less then current year
    extract('year' from created_at) < extract('year' from current_date)
    or
    -- year of `created_at` is equal to current year
    extract('year' from created_at) = extract('year' from current_date)
    and
    -- number of week of `created_at` is less then current week by 3 or more
    extract('week' from current_date) - extract('week' from created_at) >= 3
    )
and 
    -- number of minutes is not a multiple of 10
    extract('minute' from created_at)::int % 10 <> 0

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()。因为它是异步操作，所以当你使用它时，它可能不可用。

E.g。这可行：

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';之后问题得到解决。

无法解析存储的所有参数：（？）

6 个答案: