从本地存储获取数据(收藏夹项)

时间:2019-08-18 04:53:13

标签: javascript angular ionic-framework ionic4

  

如何从列表项应用中获取喜欢的项。我正在使用离子4。我的json数据添加了本地存储,但未正确添加数据。

favourite.service.ts

getAllFavoriteItems(){
    return  this.storage.get("object");
  }

  isFavorite(favorite) {
    return this.getAllFavoriteItems().then(result => {
      return result && result.indexOf(favorite) !== -1;
    });
  }

  favoriteItem(favorite) {
    return this.getAllFavoriteItems().then(result => {
      if (result) {
        result.push(favorite);
        return this.storage.set("object", result, );
      } else {
        return this.storage.set("object", [favorite]);
      }
    });
  }

  unfavoriteItem(favorite) {
    return this.getAllFavoriteItems().then(result => {
      if (result) {
        var index = result.indexOf(favorite);
        result.splice(index, 1);
        return this.storage.set("object", result);
      }
    });
  }

favourite.page.ts

  ngOnInit() {

    this.storage.get("object").then((ids) => {
      console.log( 'favouriteIds' ,ids)
      this.favouriteIds = ids;
    })


    // this.favouriteIds = this.favoriteService.getAllFavoriteItems();
    // console.log('favitems',this.favitems)
}

favourite.page.html

<ion-content no-padding color="secondary">
<ion-list> 
  <div class="main">
      <ion-item  *ngFor="let item of favouriteIds" [routerLink]="['/','details',item.id]" 
      class="item-native" (click)="showInterstitial()">
        <ion-thumbnail slot="start">
          <img [src]="item.thumnailUrl">
        </ion-thumbnail>

        <ion-label>{{item.title}}</ion-label>
        <ion-label>{{item.id}}</ion-label>

      </ion-item>

 </div>


</ion-list>
</ion-content>
屏幕快照中的

完整列表项 enter image description here

此收藏夹中的项目,但没有正确获得收藏夹项目

enter image description here

1 个答案:

答案 0 :(得分:0)

从本地存储中检索后,您需要将其解析为JSON,

FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("prepared.fxml"));
        borderPane.getChildren().remove(borderPane.getCenter()); //remove existing fxml from center.
        try {
            borderPane.setCenter(fxmlLoader.load());
        } catch (IOException e) {
            e.printStackTrace();
        }