angular - 购物 list 未列出/保存超过 1 个食谱

Question

我的目标是

1. 创建一个从 API 中提取食谱的购物 list 。
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>

购物 list 页面

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>

购物 list 页面看起来像

视觉中显示的错误是 https://www.youtube.com/watch?v=BDS_XTdw2S0 您可以看到，当我将商品添加到购物 list 时，它不会更新，直到我关闭应用程序并重新启动它。也只有 1 项。

Answer 1

您正在覆盖您的存储空间，因此只显示 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. 设置新数据到存储