Lista zakupów nie wymieniając/oszczędność ponad 1 receptury

Question

Moim celem jest

1. Stwórz listę zakupów, które ciągnie recepty z API.
2. Przełóż składniki z jednej strony na drugą.
3. Strona odświeżania/ładowania danych po dodaniu więcej niż 1.

Problem mam jest

1. tylko 1 zestaw składników obciążenia
2. Klarowny funkcja nie pozwoli już więcej do dodania.

Receptura Page

// 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> 

Lista zakupów Page

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> 

Lista zakupów strona wygląda

Błąd pokazano na wizualny jest https://www.youtube.com/watch?v=BDS_XTdw2S0 Widać, że kiedy dodać element do listy zakupów nie aktualizuje aż zamknąć aplikację i uruchomić ją ponownie. Poza tym jest tylko 1 przedmiot.

Answer 1

Musiałem użyć szablonu, aby powiązać je wszystkie i utworzyć wszystkie instancje jako obiekty.

.html złożyć

<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> 

i plik .ts jest

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

Nadpisujesz swoje miejsce przechowywania, dlatego wyświetla się tylko 1.

powinno to wyglądać tak, spróbuj użyć types i 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(); 
    }); 
}); 
} 

Więc

1. uzyskać dane z pamięci

2. Zastosuj nowy element do danych

3. Ustaw nowe dane do przechowywania e