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

Question

我想显示本地存储中 html 中的数据，但出现错误 [object promise]。我不知道如何在 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>

Answer 1

你当然需要在某处调用 saveData() 和 loadData()。我想，你已经这样做了。

要在模板中显示数据，您需要将数据存储在 class 的任何属性中。在你的情况下，你想像这样存储它：

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

在此 Promise 之后（注意：它是异步的，了解这一点很重要），您的 name 属性将填充您之前存储在 LocalStorage 中的任何值。您可能想在 Promise 上使用 .catch() 来捕获当您没有为 name.

存储任何值时发生的任何错误

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

ionic 3 storage get data and show it in html

html

storage

local-storage

ionic-framework

ionic3