Question

我正在尝试显示从localstorage到我的ion-input的数据，这是我的表单（edituser.html）

<ion-list>
        <ion-item>        
                <ion-label> <ion-icon name="person"></ion-icon></ion-label>
                <ion-input [(ngModel)]="userData.fullname" value="{{userDetails.fullname}}" type="text"></ion-input>
        </ion-item>

         <ion-item>        
                <ion-label> <ion-icon name="md-phone-portrait"></ion-icon></ion-label>
                <ion-input  [(ngModel)]="userData.phone" value="{{userDetails.phone}}"  type="text"></ion-input>
        </ion-item>

        <ion-item>        
                <ion-label> <ion-icon name="md-mail"></ion-icon></ion-label>
                <ion-input  [(ngModel)]="userData.Email" value="{{userDetails.Email}}"  type="text"></ion-input>
        </ion-item>

        <ion-item>        
                <ion-label> <ion-icon name="md-megaphone"></ion-icon></ion-label>
                <ion-input  [(ngModel)]="userData.Deskripsi" value="{{userDetails.Deskripsi}}"  type="text"></ion-input>
        </ion-item>
    </ion-list>

这是我如何存储我的localstorage

localStorage.setItem('userData', JSON.stringify(this.responseData));

和this.responseData

{"userData": {"user_id":"USER001","username":"boby","password":"c83e4046a7c5d3c4bf4c292e1e6ec681","fullname":"Boby Kurniawan","phone":"0896889....","profilpic":null,"status":null,"flag":1,"tipe":"TP001","Deskripsi":"Lorem Ipsum is ........Ipsum","Email":"asdddd@gmail.com"}}

这是我的完整edituser.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

 @IonicPage()
@Component({
  selector: 'page-edituser',
  templateUrl: 'edituser.html',
})
export class EdituserPage {
userDetails : any;
responseData: any;
userData = {"username": "","password": "", "fullName": "","Email": "", "Deskripsi" : "", "Phone":""};

  constructor(public navCtrl: NavController, public navParams: NavParams) {
        const data = JSON.parse(localStorage.getItem('userData'));
        this.userDetails = data.userData;
  }

  ionViewDidLoad() {
    console.log(this.userDetails);
  }

}

所以，我的问题是，在edituser.html中只显示两个字段（全名和电话）。我该如何解决？

这是截图

更新，（使用本机存储模块。）

因为我想存储来自API的结果，所以我将其添加到我的login.ts

中

import { Component } from '@angular/core';
import { IonicPage, NavController,LoadingController,AlertController } from 'ionic-angular';
import { HomePage } from '../home/home';
import { AuthService } from '../../providers/auth-service/auth-service';
import { TabsPage } from '../tabs/tabs';
import { Storage } from '@ionic/storage';


@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  responseData : any;
  userData = {"username": "","password": "", "fullName": "","Email": "", "Deskripsi" : "", "Phone":""};

  constructor(
              public navCtrl: NavController, 
              public authService:AuthService, 
              public loadingCtrl:LoadingController, 
              public alrt : AlertController,
              public storage: Storage ) {
              storage.clear();
  }

presentAlert(msg) {
  let alert = this.alrt.create({
    title: msg,
    buttons: ['Dismiss']
  });
  alert.present();
}

  login(){

    this.authService.postData(this.userData,'Login').then((result) => {
    this.responseData = result;
    let loading = this.loadingCtrl.create({
        content: 'Proses Login'
      });
      loading.present();
    if(this.responseData.userData){
       setTimeout(() => {
            storage.set('userData', JSON.stringify(this.responseData));
                loading.dismiss();
                  this.navCtrl.push(TabsPage, {}, {animate: true});
          }, 5000);
     }else{ 
        loading.dismiss();
        this.presentAlert("Failed to Login"); }
    }, (err) => {
        this.presentAlert("Error !!!");
    });

  }
}

但是我得到了这个错误

ERROR ReferenceError：未定义存储

Answer 1

我强烈建议不要使用浏览器localstorage API。由于您正在开发本机应用程序native storage module。由于您需要安装SQLite插件，因此在任何情况下都可以使用非常可靠的存储机制。

存储是存储键/值对和JSON对象的简便方法。存储使用下面的各种存储引擎，选择最佳一个可用，取决于平台。

来自Doc：

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

试图显示从localstorage到ion-input的数据

1 个答案: