ionic 3存储获取数据并以html显示

时间:2018-12-25 16:15:44

标签: html ionic-framework ionic3 local-storage storage

我想从本地存储以html格式显示数据,但出现错误[对象承诺]。我不知道如何在html中显示数据。我可以显示来自控制台的数据,但不能显示为html。请帮助我

TS

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


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

  inputnama: string;
  public name: any;

  constructor(public navCtrl: NavController, 
    public navParams: NavParams, 
    private storage: Storage) {`enter code here`


  }

  saveData(){
    this.storage.set('name', this.inputnama);
  }

  loadData(){
    this.storage.get('name').then((name) => {
    console.log(name);
  });
}

HTML:

<ion-row padding-top>
            <ion-col class="col-tengah" col-10 no-padding>
                <ion-item style="background: transparent" >
                    <ion-input class="input-biodata" [(ngModel)]="inputnama" placeholder="Nama">{{name}}</ion-input>
                </ion-item>
            </ion-col>
        </ion-row>

1 个答案:

答案 0 :(得分:1)

您当然需要致电saveData()loadData()。我想,您已经做到了。

要在模板中显示数据,您需要将数据存储在类的任何属性中。在您的情况下,您想这样存储它:

this.storage.get('name').then((name) => {
    this.name = name;
});

在此Promise之后(注意:这是异步的,重要的是要知道),您的name属性将使用之前存储在LocalStorage中的任何值填充。 您可能想在.catch()上使用Promise来捕获在未存储name的任何值时发生的任何错误。