The shopping list does not contain listing / saving more than 1 recipe

Question

My goal

• Create a shopping list that pulls recipes from the API.
• Take the ingredients from one page to another.
• Page for updating / loading data when adding more than 1.

I have a problem:

• Download only one set of ingredients
• The clear function will not allow adding more.

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

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

The shopping list page looks like

The error shown in the picture https://www.youtube.com/watch?v=BDS_XTdw2S0 You can see that when I add an item to the shopping list, it does not update until I close the application and restart it. There is also only 1 element.

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 still a string use JSON.parse() on it
    this.storage.set('myData', ingredientLines).then(result =>{
        toast.present();
    }); 
}); 
}

,