购物清单未列出/保存超过1个食谱

Question

我的目标是

1. 创建一个从API中提取食谱的购物清单.
2. 将成分从一页送到另一页.
3. 添加多于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 您可以看到,当我将项目添加到购物清单时,它不会更新,直到我关闭应用程序并重新启动它.此外,只有1项.

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();
        });
    });
}