Question

以下是我本地存储中的数据 -

键 - education 价值 - [{"title":"saurabh","description":"dd","tagline":"tt","date":"dd"},{"title":"aman","description":"dd","tagline":"tt","date":"dd"},{"title":"jessica","description":"dd","tagline":"tt","date":"dd"},{"title":"rosh","description":"dd","tagline":"tt","date":"dd"}]

我想展示每个

标题，说明在我的网页上逐行

我的test.ts

fetchdata = '';
  ionViewDidLoad() {

    this.fetchdata = localStorage.getItem('education'); 
// what do i do next to show this on `test.html`
  }

我的test.html

<ion-header>

    <ion-navbar>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Education</ion-title>
    </ion-navbar>

  </ion-header>


<ion-content padding>

    <button ion-button item-right>
        <ion-icon name="md-add-circle" (click)="save();"></ion-icon>
      </button>

</ion-content>

Answer 1

利用.select-page { background-image:url("http://localhost:8080/assets/background.png") }结构指令显示对象数组

*ngFor

查看此链接以获取工作示例Link

Answer 2

首先，您无法将对象保存在存储中，但只能保存字符串。因此，要保存您的对象，您必须：

localStorage.setItem('education', JSON.stringify(data));

并将其视为对象

this.fetchdata = JSON.parse(localStorage.getItem('education'));

比你可以使用NgForOf Directive迭代数组：

<ul id="elements">
    <li *ngFor="let elem of fetchdata">
        {{elem.title}} {{elem.description}}
    </li>
</ul>

如何在列表中的html页面上显示本地存储的数组对象？

2 个答案: