Question

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

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

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

如果有人能给我一个例子或者帮助我，我将非常感激。

Answer 1

您可以通过维护数据结构并将其作为参数传递给下一页/将其存储在本地存储/提交到数据库并从那里拉到所需页面来完成此操作。

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

E.g。

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

在你myFunc()中，你可以操纵你的数据结构。例如。添加/维护一个代表addedToCart=true种代码的属性。

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