购物清单没有列出/节省超过1个配方

Question

我的目标是

1. 创建这是从一个API拉食谱购物清单。
2. 从一页到另一页采取成分。
3. 页面添加1个以上时刷新/加载数据。

我遇到的问题是

1. 只有1套成分负载
2. 的清除功能将不允许再添加的。

配方页面

// Loading Recipes 
///////////////////////////////////////////////////////////////////// 

loadDetails1(id){ 
    this.apiAuthentication.loadDetails(id) 
    .then(data => { 
     this.api = data; 
    }); 
} 

// Add to Shopping List 
///////////////////////////////////////////////////////////////////// 

submit(api) { 

    let toast = this.toastCtrl.create({ 
     message: 'Added to shopping list', 
     duration: 1000 
    }); 

    console.log(this.api); 

    this.storage.get('myData').then((api) => { 

     // add one igredient to the ingredientLines object 
     // if it's still a string use JSON.parse() on it 
     this.storage.set('myData', api).then(result =>{ 
      toast.present(); 
      console.log(api); 
     }); 
    }); 
} 

HTML

<h1 (click)="submit(api?.ingredientLines)">Add to shopping list</h1> 
<ul> 
    <li *ngFor="let item of api?.ingredientLines"><span>{{item}}</span></li> 
</ul> 

购物列表页

getData() { 
    this.storage.get('myData').then((data => { 
     this.api = data; 
     console.log(data); 

     setInterval(() => { 
     console.log(data); 
     },5000); 
    })); 
} 

HTML

<ion-content padding> 
    <ion-card> 
     <ion-card-header> 
      {{api?.name}} 
     </ion-card-header> 

     <ion-list> 
      <ion-item> 
       <ul> 
        <li *ngFor="let item of api?.ingredientLines"> 
         <ion-label>{{item}}</ion-label> 
         <ion-checkbox></ion-checkbox> 
        </li> 
       </ul> 
      </ion-item> 
     </ion-list> 
     <button ion-button block full color="danger" (click)="clear(item)">Remove</button> 
    </ion-card> 
</ion-content> 

购物清单页面看起来像

在视觉显示错误是https://www.youtube.com/watch?v=BDS_XTdw2S0 你可以看到，当我将项目添加到购物清单时不更新，直到我关闭应用程序，然后重新启动它。也只有一个项目。

Answer 1

我必须使用模板将所有这些绑定在一起，并将所有实例创建为对象。

.html文件

<template ngFor let-api [ngForOf]="shoppingList"> 
    <ion-card> 
     <ion-card-header> 
      {{api?.name}} 
     </ion-card-header> 
     <ion-list inset> 
      <ion-item *ngFor="let ingredient of api.ingredientLines"> 
       <ion-label>{{ ingredient }}</ion-label> 
       <ion-checkbox item-right></ion-checkbox> 
      </ion-item> 
     </ion-list> 
     <button ion-button block full color="danger" (click)="clear(api)">Remove</button> 
    </ion-card> 
</template> 

和.ts文件

public submit(api: any) { 

    let toast = this.toastCtrl.create({ 
     message: 'Added to shopping list', 
     duration: 1000 
    }); 

    console.log(this.api); 
    var thisRecipe = this.api; 

    this.storage.get('shoppingList').then((shoppingList) => { 
     if(!shoppingList){ 
      shoppingList = []; 
     } 

     shoppingList.push(thisRecipe); 

     this.storage.set('shoppingList', shoppingList).then(result => { 
      console.log("Added to Shopping List", result); 
      toast.present(); 
     }); 
    }); 
} 

Answer 2

您正在覆盖存储器，这就是为什么只出现1个。

它应该是这样的，尽量使用types和promises

public submit(ingredientLines: any) { 

let toast = this.toastCtrl.create({ 
    message: 'Added to shopping list', 
    duration: 1000 
}); 

this.storage.get('myData').then((ingredientLines) => { 

    console.log(ingredientLines); 

    // add one igredient to the ingredientLines object 
    // if it's still a string use JSON.parse() on it 
    this.storage.set('myData', ingredientLines).then(result =>{ 
     toast.present(); 
    }); 
}); 
} 

所以

1. 从存储中获取数据

2. 申请新项目的数据

3. 将新数据设置为存储e