代码之家  ›  专栏  ›  技术社区  ›  jamesharvey

如何将数据数组对象保存到ionic SQlite存储(TypeScript、Angular 5、ionic 3)

  •  0
  • jamesharvey  · 技术社区  · 8 年前

    我正在尝试使用Ionic SQlite存储将具有许多属性的数据数组对象保存到收藏夹列表中。

    例如,我在data provider中有一个数据数组:

    数据ts

         private options: any[] = [
    
            {
              "name": "option 01",
              "website": "www.google.com",
              "about": "choose this option 01",
              "id": "1"
            },
    
            {
              "name": "option 02",
              "website": "www.yahoo.com",
              "about": "choose this option 02",
              "id": "2"
            },
            {
              "name": "option 03",
              "website": "www.bing.com",
              "about": "choose this option 03",
              "id": "3"
            },
            {
              "name": "option 04",
              "website": "www.stackoverflow.com",
              "about": "choose this option 04",
              "id": "4"
            }
        ]
    

    我在我的 主页html 具有保存到收藏夹列表选项的页面。

    <ion-card *ngFor="let option of options">
      <h1>{{option.name}}</h1>
      <h1>{{option.about }}</h1>
    <h4>{{option.website}}</h4>
    
    <button ion-button block (click)="saveToFavorite()">Save to Favorite List</button>
    
    <button ion-button block (click)="removeFromFavorite()">Remove from Favorite List</button>
    </ion-card>
    

    这是不完整的 家ts 文件

    import { Storage } from '@ionic/storage';
    
    const STORAGE_KEY = 'favoriteOptions';
    
      saveToFavorite(option) {
    
        this.storage.set();
      }
    
      removeFromFavorite(option) {
       this.storage.remove();
      }
    

    我希望saveToFavorite()将选项数据数组对象保存到收藏夹选项存储键,以便我可以将它们全部加载到 收藏夹列表HTML 页码:

    <ion-content>
        <div *ngFor="let option of options">
            <h1>{{option.name}}</h1>
            <p>{{option.about}}</p>
            <button ion-button block (click)="removeFromFavorite()">Remove from Favorite List</button>
        </div>
    </ion-content>
    

    收藏夹列表ts 文件:

      getAllFavoriteOptions() {
        return this.storage.get(STORAGE_KEY);
      }
    
      removeFromFavorite(option) {
       this.storage.remove();
      }
    

    不知怎么的,我有点迷路了。请更正ts文件上的代码。

    提前感谢!

    1 回复  |  直到 8 年前
        1
  •  1
  •   Hussein    8 年前

    创建保存收藏夹的功能:

    addFavorite(favorite:any):void{
      let favorites = this.storage.get('favorites');
      if(favorites){
        favorites.push(favorite);
        this.storage.set('favorites', favorites);
      }else{
        favorites = [];
        favorites.push(favorite);
        this.storage.set('favorites',favorites);
      }
    

    然后,要获取收藏夹,请添加此功能:

    getFavorites():any{
      let favorites = this.storage.get("favorites");
      return favorites;
    }
    

    对于ionic :如果您正在使用 @ionic/storage 然后要加载项目,请使用 async pipe :

    getFavorites():Promise<any>{
      let favorites = this.storage.get("favorites");
      return favorites;
    }
    

    然后,要在*ngFor中访问它们,请执行以下操作:

    <div *ngFor="let item of getFavorites() | async">
          <div>{{item.name}}</div>
    </div>