如何使用 *ngFor 指令从 Ionic 3 上的存储中获取数据（Cordova、Ionic 3、Angular 5）

Question

我正在使用 Ionic 的存储来保存具有多个属性的 javascript 数据 object。我正在尝试创建一个可以从离子存储中获取数据的收藏夹列表。

这是我的数据 provider 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"
 }
]

我正在使用按钮将项目保存在我的 html 文件中。 HTML 主文件使用 *ngFor let 指令从提供程序中获取项目。

主要 HTML:

<div *ngFor="let item of items"> 
  <h2>{{item.name}}</h2>  
  <p>{{item.description}}</p>
  <button (click)="saveToFav(item)">Save to favorites</button>
</div>

主 TS 文件：

savToFav(item) {
this.storage.set(this.item.id, this.item);
}

这会将项目及其属性保存到 Ionic 存储中。我可以看到它出现在我的浏览器的检查 -> 应用程序页面上。

我正在尝试从离子存储中获取项目到收藏夹 HTML 页面。

最喜欢的 HTML 页：

  <div *ngFor="let item of items"> 
      <h2>{{item.name}}</h2>  
      <p>{{item.description}}</p>
      <button (click)="remove(item)">Remove from favorites</button>
    </div>

最喜欢的 TS 文件

    this.platform.ready().then(() => {
    this.storage.get(this.item);
});

但这真的不会在最喜欢的 html 页面上加载任何内容..

我应该怎么做才能将存储在 Ionic 存储中的每个项目都提取到收藏夹 HTML 页面？

提前致谢，

Answer 1

您以错误的方式使用存储获取和设置功能，所有收藏的项目必须存储在单个键中，以便以后需要时您可以拥有所有收藏的列表。应该像下面这样

savToFav(item) {
  this.storage.get('favoritesList')
  .then((fav)=>{
    if(fav == null){
       fav = [];
    }
    //This will fetch the old items and push the new item in array
    fav.push(item); return fav;
  })
  .then((fav)=>{
    //this will store the new update favorite list array in storage.
    this.storage.set('favoritesList',fav);
  })
}

//Favorite ts file you can use it like below 
this.storage.get('favoritesList').then((fav)=>{
 //you can asssing it any variable and use in your *ngFor loop
  this.myFavList = fav;
})

如何使用 *ngFor 指令从 Ionic 3 上的存储中获取数据（Cordova、Ionic 3、Angular 5）

How to fetch data using *ngFor directive from storage on Ionic 3 (Cordova, Ionic 3, Angular 5)

cordova

ionic-framework

ionic2

ionic3

angular