如何使用 Ionic 存储（Ionic 3、Angular 5、Cordova）在 HTML 上显示存储的项目答案

【问题标题】：How to display stored items on HTML using Ionic storage (Ionic 3, Angular 5, Cordova)如何使用 Ionic 存储（Ionic 3、Angular 5、Cordova）在 HTML 上显示存储的项目
【发布时间】：2018-10-10 01:09:06
【问题描述】：

我正在使用离子存储将项目保存到 SQlite 数据库。以下是我可以从我的数据提供者 TS 文件中保存的项目列表：

  private items: any[] = [

    {
   "name": "item 01",
   "description": "this is item 01",
   "id": "1"
   },
    {
   "name": "item 02",
   "description": "this is item 02",
   "id": "2"
   },
    {
   "name": "item 03",
   "description": "this is item 03",
   "id": "3"
   },
   {
"name": "item 04",
 "description":"this is item 04",
 "id":"4"
 }
]

当我使用

保存它们时

this.storage.set(`item ${ this.item.id }`, JSON.stringify(this.item));

我可以看到它们以唯一的键值完美存储。每个项目都以“项目（项目编号）”作为键，并将其内容存储到离子存储中。

我什至可以在 console.log 上调用它们.. 但是我怎样才能在 html 页面上调用它们呢？有没有办法在 html 页面上显示来自离子存储的所有存储数据？理想情况下使用 {{item.name}}、{{item.description}}

谢谢，

【问题讨论】：

您正在单独保存每个项目，因此您使用 this.storage.get(YOUR_KEY) 单独调用它们并将其放在 item 上。
是的，这种做法在我的项目中是可以的。有没有办法将存储中存储的所有项目加载到html？
您可以使用forEach方法获取数据并将其分配给可以从您的html模板绑定到的var

标签： angular cordova ionic-framework ionic2 cordova-plugins

【解决方案1】：

由于您使用的是 Ionic Storage，您可能知道 this.storage.get('item-key') 返回一个承诺。

所以我建议你创建一个类型为

的实例属性

items : Array<string>  = new Array<string>();

然后在你的 ngOnInit 中

ngOnInit(){
   this.storage.get('key').then(
       (value) => {
        this.items.push(`${key} : ${value}`)
      }
   );
}

在您的模板中使用简单的*ngFor="let item of items" 即可

【讨论】：