OnClick 将项目从一个页面添加到另一个页面（Ionic 2 + Angular 2）

Question

我目前正在构建一个食谱应用程序，我想添加一个购物清单页面，您可以单击“添加到购物清单”按钮，它将获取<ul> 中列出的成分并将它们发布到我想要的页面上，如果可能，它们将需要被删除并标记为完整。本质上是一个没有任何价格的购物车。

我的成分从 API（http 获取）中提取并打印如下。

<ul>
    <li *ngFor="let item of api?.ingredientLines">{{item}}</li>
</ul>

如果有人可以向我展示一个示例或帮助我，将不胜感激。

Answer 1

您可以通过维护数据结构并将其作为参数传递到下一页/将其存储在本地存储中/提交到数据库并从所需页面上拉取来做到这一点。

使用(click)='myFunc()' 类型的代码单击任何项​​目后，您将对此结构进行更改。

例如

<ul *ngFor="let item of api?.ingredientLines">
    <li (click)='myFunc()>{{item}}</li>
</ul>

在您myFunc() 中，您可以操作您的数据结构。例如。添加/维护一个属性，上面写着addedToCart=true 类型的代码。

非常简单。希望这可以帮助。如果您有任何细节，可以提供帮助。