Javascript 在每次输入更改时订阅自定义对象并保存到localStorage

我正在尝试创建一个食品应用程序，其中我列出了一个产品。用户可以增加数量或减少

我想在每次更新数量输入时将对象数据更新到localStorage。现在，在ts文件中创建循环后，我被卡住了

html组件代码

<div class="input-group-prepend">
    <button class="btn btn-danger" id="" (click)="obj[item.item_code] = obj[item.item_code] - 1" data-type="minus">-</button>
</div>
<input type="number" name="quant[{{item.id}}]" id="qty_input" class="form-control qty_input"  [(ngModel)]="obj[item.item_code]" value="{{obj[item.item_code]}}" min="1">
<div class="input-group-prepend">
    <button class="btn btn-success" id="" (click)="obj[item.item_code] = obj[item.item_code] + 1" data-type="plus">+</button>
</div>

-
+

这正是我调用api后得到的结果。这是我在stackbliz中介绍的非常简短的代码。请帮忙

---

您可以将

单击事件中的对象
obj
传递给处理程序。请注意，我已将
onClick（obj）
处理程序添加到
click
事件中

-
+

在控制器中，将其推送到本地存储器

导出类AppComponent实现OnInit{
名称='Angular'+VERSION.major；
obj={}；
构造函数（）{}
cartItems=[
{id:1，项目代码：“大米组合”，名称：“大米组合”，价格：95}，
{id:2，项目代码：“chapati_combo”，名称：“chapati combo”，价格：65}，
{id:3，项目代码：“脉冲组合”，名称：“脉冲组合”，价格：25}，
]
恩戈尼尼特（）{
对于（本.cartItems的let项）{
此.obj[项目.项目\代码]=0；
}
}
onClick（项目）{
setItem（'items'，JSON.stringify（items））；
}
}

我已经修改了您的
您可以将
单击
事件中的对象
obj
传递给处理程序。请注意，我已将
onClick（obj）
处理程序添加到
click
事件中

-
+

在控制器中，将其推送到本地存储器

导出类AppComponent实现OnInit{
名称='Angular'+VERSION.major；
obj={}；
构造函数（）{}
cartItems=[
{id:1，项目代码：“大米组合”，名称：“大米组合”，价格：95}，
{id:2，项目代码：“chapati_combo”，名称：“chapati combo”，价格：65}，
{id:3，项目代码：“脉冲组合”，名称：“脉冲组合”，价格：25}，
]
恩戈尼尼特（）{
对于（本.cartItems的let项）{
此.obj[项目.项目\代码]=0；
}
}
onClick（项目）{
setItem（'items'，JSON.stringify（items））；
}
}

我已经修改了您的
如果您使用
[（ngModel）]
您可以添加
（ngModelChange）
并将对象状态保存到本地存储

顺便说一句，如果您将+/-按钮之类的操作移动到typescript文件中单独的函数中，它将更具可读性，并且您将有更多的选项来操作数据。此外，它是下一个可以添加本地存储状态更新的地方。
如果使用
[（ngModel）]
可以添加
（ngModelChange）
并将对象状态保存到本地存储

顺便说一句，如果您将+/-按钮之类的操作移动到typescript文件中单独的函数中，它将更具可读性，并且您将有更多的选项来操作数据。此外，它是下一个可以添加本地存储状态更新的地方。
这个onClick方法将去哪里？这个onClick方法将去哪里？
<div class="input-group-prepend">
    <button class="btn btn-danger" id="" (click)="obj[item.item_code] = obj[item.item_code] - 1" data-type="minus">-</button>
</div>
<input type="number" name="quant[{{item.id}}]" id="qty_input" class="form-control qty_input"  [(ngModel)]="obj[item.item_code]" value="{{obj[item.item_code]}}" min="1">
<div class="input-group-prepend">
    <button class="btn btn-success" id="" (click)="obj[item.item_code] = obj[item.item_code] + 1" data-type="plus">+</button>
</div>