ionic 2 local storage 获取并显示数据

Posted 2023-03-05

【中文标题】ionic 2 local storage 获取并显示数据

【英文标题】：ionic 2 local storage get and display the data

【发布时间】：2018-02-03 07:13:34

【问题描述】：

嗨，我无法访问本地存储中的数据，它总是给我错误。我需要帮助才能在家中显示我的数据。谢谢你的帮助:)

错误：

打字稿错误 'Promise' 类型的参数不能分配给 'string' 类型的参数。

this.user = JSON.parse(this.storage.get(this.key)); prompt.present();

打字稿

import  Component  from '@angular/core';
import  IonicPage, NavController, NavParams, ViewController, AlertController  from 'ionic-angular';
import Storage from '@ionic/storage';

/**
 * Generated class for the CrudPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component(
  selector: 'page-crud',
  templateUrl: 'crud.html',
)
export class CrudPage 

  user: any = [] ;
  key: any;

  constructor(public navCtrl: NavController,
  public navParams: NavParams,
  public viewCtrl: ViewController,
  public alertCtrl: AlertController,
  public storage: Storage) 
    this.storage.forEach( (value) => 
      this.user.push(value);
    );
  

  ionViewDidLoad() 
    console.log('ionViewDidLoad CrudPage');
  

  add() 
    let prompt = this.alertCtrl.create(
      title: 'Add User',
      message: "Enter information of the user",
      inputs: [
        
          name: 'name',
          placeholder: 'name'
        ,
        
          name: 'password',
          placeholder: 'password'
        ,
      ],
      buttons: [
        
          text: 'Cancel',
          handler: data => 
            console.log('Cancel clicked!');
          
        ,
        
          text: 'Save',
          handler: data => 
            let key = data.name + data.password;
            this.storage.set(key, JSON.stringify(data));
            console.log(data);
          
        
      ]
    );
    this.user = JSON.parse(this.storage.get(this.key));
    prompt.present();
  

  delete(key)
    this.storage.remove(key);
  

  update(key)

  

HTML

<!--
  Generated template for the CrudPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Crud</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    <button ion-button clear icon-start color="dark" (click)="add()">
        <ion-icon name="add-circle">Add User</ion-icon>
    </button>

    <br>

  <ion-grid text-center>
    <ion-row>
      <ion-col width-100>
        USERS
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col width-33>
        <strong>User Name</strong>
      </ion-col>
      <ion-col width-33>
        <strong>Password</strong>
      </ion-col>
      <ion-col width-33>
        <strong>Action</strong>
      </ion-col>
    </ion-row>
    <ion-row *ngFor="let users of user" text-center>
      <ion-col width-33>
        <p>users.name</p>
      </ion-col>
      <ion-col width-33>
        <p>users.password</p>
      </ion-col>
      <ion-col width-33>
        <button ion-button clear icon-start color="dark" (click)="delete(users.name+users.password)">
          <ion-icon name="trash"></ion-icon>
        </button>
        <button ion-button clear icon-start color="dark" (click)="update(users.name+users.password)">
          <ion-icon name="create"></ion-icon>
        </button>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

请帮忙 :) 非常感谢 :)

【参考方案1】：

this.storage.get(this.key) 返回一个承诺，你必须这样做：

this.storage.get(this.key).then(value => 
    this.user = JSON.parse(value);
);

https://ionicframework.com/docs/storage/

【讨论】：

感谢您的回复 :) 我明白了，感谢您的帮助 :)

我能问一下 ionic 中的 onload() 函数是什么吗？因为每次我点击添加时，它并没有直接添加，我必须加载页面才能添加。我该怎么办 ？谢谢你:)