ionic 3 storage 获取数据并在 html 中显示答案

【问题标题】：ionic 3 storage get data and show it in htmlionic 3 storage 获取数据并在 html 中显示
【发布时间】：2019-05-24 05:38:33
【问题描述】：

我想从本地存储中以 html 格式显示数据，但出现错误 [object promise]。我不知道如何在 html 中显示数据。我可以从控制台显示数据，但不能在 html 中显示。请帮帮我

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>

【问题讨论】：

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

【解决方案1】：

您当然需要在某个地方致电saveData() 和loadData()。我想，你已经这样做了。

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

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

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

【讨论】：