Question

我从REST API获取json，并希望将其存储到其他页面以供使用，但是当我构建它时，它有以下错误：

运行时错误无法解析LoginPage的所有参数：（[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，？）。

以下是我的login.ts代码：

import { Component } from '@angular/core';
import { NavController, LoadingController, ToastController } from 'ionic-angular';
import { FormBuilder, Validators } from "@angular/forms";
import { AuthService } from '../../providers/auth-service/auth-service';
import { NavParams } from 'ionic-angular';
import { MePage } from '../me/me';
import { IonicStorageModule } from '@ionic/storage';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
  loginData = { email:'', password:'', deviceToken:'testingDT', os:'ios', appVersion:'3.0.0' };
  authorize: string;

  constructor(public navCtrl: NavController, private navParams: NavParams, public authService: AuthService, public loadingCtrl: LoadingController, private toastCtrl: ToastController, public _form:FormBuilder, public storage: Storage) {}

 doLogin() {
    this.authService.login(this.loginData).then(data => {
      console.log("CHECKING: ",data.name);
      this.storage.set('user', JSON.stringify(data));
    }, (err) => {
    });
 }
}

有谁知道问题是什么？非常感谢。

AUTH-service.ts：

import { Injectable } from '@angular/core';
import { Http, RequestOptions, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

let apiUrl = localStorage.getItem('domain');

@Injectable()
export class AuthService {

  data:any;

  constructor(public http: Http) {}

  login(credentials) {

  if(this.data){
    return Promise.resolve(this.data);
  }

  let opt: RequestOptions;
  let myHeaders: Headers = new Headers;

  myHeaders.set('Accept', 'application/json; charset=utf-8');
  myHeaders.append('Content-type', 'application/json; charset=utf-8');
  opt = new RequestOptions({
    headers: myHeaders
  })

  return new Promise(resolve => {
  this.http.get(apiUrl+'login?email='+credentials.email+'&password='+credentials.password+'&deviceToken='+credentials.deviceToken+'&os='+credentials.os+'&appVersion='+credentials.appVersion, opt)
    .map(res => res.json())
    .subscribe(data => {
      this.data = data;
      resolve(this.data);
    });
   });
}

app.module.ts：

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler, Platform } from 'ionic-angular';
import { FetchApp } from './app.component';
import { LoginPage } from '../pages/login/login';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TranslateModule } from 'ng2-translate/ng2-translate';
import { TranslateLoader, TranslateStaticLoader } from 'ng2-translate/src/translate.service';
import { Http } from '@angular/http';
import { TranslateService } from 'ng2-translate';
import { Globalization } from 'ionic-native';
import { Storage } from '@ionic/storage';
import { defaultLanguage, availableLanguages, sysOptions } from '../pages/lang/lang.constants';
import { AuthService } from '../providers/auth-service/auth-service';

export function createTranslateLoader(http: Http) {
  return new TranslateStaticLoader(http, './assets/i18n/', '.json');
}

export function provideStorage() {
  return new Storage();
}

@NgModule({
  declarations: [
    FetchApp,
    LoginPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(FetchApp, {
      backButtonText: ''
    }),
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    FetchApp,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    { provide: Storage, useFactory: provideStorage },
    AuthService,
    Storage
  ]
})
export class AppModule {}
}

Answer 1

更改

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

到

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

将app.module.ts更改为

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler, Platform } from 'ionic-angular';
import { FetchApp } from './app.component';
import { LoginPage } from '../pages/login/login';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TranslateModule } from 'ng2-translate/ng2-translate';
import { TranslateLoader, TranslateStaticLoader } from 'ng2-translate/src/translate.service';
import { Http } from '@angular/http';
import { TranslateService } from 'ng2-translate';
import { Globalization } from 'ionic-native';

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

import { defaultLanguage, availableLanguages, sysOptions } from '../pages/lang/lang.constants';
import { AuthService } from '../providers/auth-service/auth-service';

export function createTranslateLoader(http: Http) {
  return new TranslateStaticLoader(http, './assets/i18n/', '.json');
}


@NgModule({
  declarations: [
    FetchApp,
    LoginPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(FetchApp, {
      backButtonText: ''
    }),
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    }),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    FetchApp,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthService 
  ]
})
export class AppModule {}
}

在"@ionic/storage": "2.0.1"中设置package.json并执行npm install。

ionic2使用存储来存储json对象

1 个答案: