如何使用离子存储(离子3，Angular 5，Cordova)在HTML上显示存储的项目

Question

我正在使用离子存储将项目保存到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}}

谢谢，

Answer 1

由于您正在使用离子存储，您可能知道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"会做