Question

我的目标是

创建一个从API中提取食谱的购物清单。
将食材从一页送到另一页。
添加超过1时刷新/加载数据的页面。

我遇到的问题是

只加载一组配料
不再允许添加clear功能。

食谱页面

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

您正在覆盖您的存储空间，这就是为什么只会出现1个存储空间。

应该如下所示，尝试使用promises和{{3}}

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

所以

从存储中获取数据
将新项目应用于数据
将新数据设置为存储

Answer 2

我必须使用模板将所有这些绑定在一起并将所有实例创建为对象。

.html文件

Traceback (most recent call last):
  File "/usr/local/lib/python3.6/site-packages/tornado-4.5.dev1-py3.6-linux-x86_64.egg/tornado/web.py", line 1474, in _execute
    result = yield result
  File "/usr/local/lib/python3.6/site-packages/tornado-4.5.dev1-py3.6-linux-x86_64.egg/tornado/gen.py", line 1045, in run
    value = future.result()
  File "/usr/local/lib/python3.6/site-packages/tornado-4.5.dev1-py3.6-linux-x86_64.egg/tornado/concurrent.py", line 237, in result
    raise_exc_info(self._exc_info)
  File "<string>", line 3, in raise_exc_info
  File "/usr/local/lib/python3.6/site-packages/tornado-4.5.dev1-py3.6-linux-x86_64.egg/tornado/gen.py", line 1051, in run
    yielded = self.gen.throw(*exc_info)
  File "<string>", line 6, in _wrap_awaitable
  File "/home/cs/charliesays/authHandlers.py", line 13, in get
    code=self.get_argument("code"))
  File "<string>", line 3, in __await__
  File "/usr/local/lib/python3.6/site-packages/tornado-4.5.dev1-py3.6-linux-x86_64.egg/tornado/gen.py", line 1045, in run
    value = future.result()
  File "/usr/local/lib/python3.6/site-packages/tornado-4.5.dev1-py3.6-linux-x86_64.egg/tornado/concurrent.py", line 237, in result
    raise_exc_info(self._exc_info)
  File "<string>", line 3, in raise_exc_info
  File "/usr/local/lib/python3.6/site-packages/tornado-4.5.dev1-py3.6-linux-x86_64.egg/tornado/stack_context.py", line 314, in wrapped
    ret = fn(*args, **kwargs)
  File "/usr/local/lib/python3.6/site-packages/tornado-4.5.dev1-py3.6-linux-x86_64.egg/tornado/auth.py", line 983, in _on_access_token
    "access_token": args["access_token"][-1],
KeyError: 'access_token'

和.ts文件是

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

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

2 个答案: