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

Question

我正在使用 Ionic 存储将项目保存到 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));

我可以看到它们以唯一键值完美存储。每个项目都将 'item (item number)' 作为键并将其内容存储到离子存储中。

我什至可以在 console.log 上给他们打电话。但是我怎样才能在 html 页面上调用它们呢？有什么方法可以在 html 页面上显示来自离子存储的所有存储数据吗？理想情况下使用 {{item.name}}, {{item.description}}

谢谢，

Answer 1

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

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

的实例属性

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

然后在你的 ngOnInit

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

在您的模板中，一个简单的 *ngFor="let item of items" 就可以了

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

How to display stored items on HTML using Ionic storage (Ionic 3, Angular 5, Cordova)

cordova

ionic-framework

cordova-plugins

ionic2

angular