购物清单未列出/保存超过 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 您可以看到，当我将商品添加到购物清单时，它不会更新，直到我关闭应用程序并重新启动它。也只有 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();
        });
    });
}

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. 将新数据设置为存储