无法在Ionic App中设置和删除参数到存储设备

Question

我正在使用Ionic Ecommerce应用，当用户登录时，此后我将用户ID设置为存储，并且当用户单击注销按钮时，它将删除存储，但未将参数设置为存储空间。

这是我的登录页面：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController, Events } from 'ionic-angular';
import { RestapiProvider } from '../../providers/restapi/restapi';
import { RegisterPage } from '../register/register';
import { CartPage } from './../cart/cart';
import {ForgetpasswordPage} from '../forgetpassword/forgetpassword';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';
import { MyApp } from './../../app/app.component';
import { Storage } from '@ionic/storage';

@IonicPage()
@Component({
  selector: 'page-loginpage',
  templateUrl: 'loginpage.html',
})
export class LoginpagePage {
  todo : FormGroup;
  responseData : any;
  userData = {"username": "", "password": ""};
  user: any;
  constructor(public navCtrl: NavController, public navParams: NavParams,
    public restProvider: RestapiProvider, private formBuilder: FormBuilder, private alertCtrl: AlertController, public events: Events, private storage: Storage) {
      this.todo = this.formBuilder.group({
        username: ['', Validators.required],
        password: ['', Validators.required],
      });

  }

  createUser(user) {
    this.events.publish('user:created', user);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginpagePage');
  }

    getloginUsers(){
      this.restProvider.getUsers(this.userData, 'user_Login').subscribe((data) => {
        if (data) {
          this.responseData = data;
          this.user = this.responseData.msg.name;
          this.storage.set("ID", this.responseData.msg.id);  <!-- I am setting the User Id to the Storage -->
          this.createUser(this.user);
          if (this.responseData.status === 'success') {
            this.navCtrl.push(MyApp);
          }
          else{
            this.presentAlert();
          }
        }
      });
 }

 presentAlert() {
  let alert = this.alertCtrl.create({
    title: 'Incorrect Username Or Password',
    buttons: ['Dismiss']
  });
  alert.present();
 }
}

用户登录时，我正在存储中设置用户ID。

这是我的 app.component.ts ：

import { LoginpagePage } from './../pages/loginpage/loginpage';
import { FrontPage } from './../pages/front/front';
import { Component, ViewChild } from '@angular/core';
import { Events, Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ProductPage } from '../pages/product/product';
import { MyordersPage } from '../pages/myorders/myorders';
import { Storage } from '@ionic/storage';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  menuclick: boolean = true;
  menuclick2: boolean = false;
  rootPage: any = FrontPage;
  uemail: string;
  userName1: string;
  pages: Array<{title: string, component: any, name2: string}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public events: Events, private storage: Storage) {
    this.initializeApp();
    this.pages = [
      { title: 'Home', component: FrontPage, name2: 'home' },
      { title: 'Product Categories', component: ProductPage, name2: 'basket' },
      { title: 'Merchandise', component: ProductPage, name2: 'man' },
      { title: 'My Orders', component: MyordersPage, name2: 'cart' },
    ];

    this.events.subscribe('user:created', (data) => { // update from login
      this.userName1 = data;
      this.menuclick2 = true;
      this.menuclick = false;
 });

  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    this.nav.setRoot(page.component);
  }

  loginpage2()
  {
    this.nav.push(LoginpagePage);
  }

  logoutClicked() {
    console.log("Logout");
    this.storage.remove("ID");  <!-- I am removing the set item from the Storage  -->
    this.nav.setRoot(FrontPage);
    this.userName1 = null;
    this.menuclick2 = false;
    this.menuclick = true;
  }

}

当我在myorders.ts中检查用户ID时，它没有返回任何值：

这是我的 myorders.ts ：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { CartPage } from './../cart/cart';
import { Storage } from '@ionic/storage';

@IonicPage()
@Component({
  selector: 'page-myorders',
  templateUrl: 'myorders.html',
})
export class MyordersPage {
  userhas: boolean = false;
  usernot:  boolean = true;
  newuserid: any;
  constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MyordersPage');
  }

  public GetUsername(){
    if(this.storage.get("ID"))
    {
      this.userhas = true;
      this.usernot = false;
      this.newuserid = this.storage.get("ID");
    }
  }

  cardpage2()
 {
   this.navCtrl.push(CartPage);
 }
}

这是我的 myorders.html ：

 <p>{{this.newuserid}}</p>

在此app.component.ts中，我具有注销功能，其中用户ID正在从存储中删除，但问题是我无法设置和从存储中删除项目。非常感谢您的帮助。

Answer 1

 this.storage.remove("ID").then(() => {
    this.userName1 = null;
    this.menuclick2 = false;
    this.menuclick = true;
    this.nav.setRoot(FrontPage);
  });

storage.remove返回一个Promise，请等待它再做其他事情。

还要在清理完命令后尝试设置setRoot ...