数据绑定到具有角度本地存储数据的表

Posted 2023-05-09

【中文标题】数据绑定到具有角度本地存储数据的表

【英文标题】：Data binding to table with local storage data in angular

【发布时间】：2020-11-20 00:51:24

【问题描述】：

您好，我正在使用 angular 8 做简单的购物车应用程序。我有下订单屏幕，我列出了一些要订购的产品，并附有数量参考图片选项。我从 json 数据中列出产品并绑定到表中，我有一个场景，称为根据用户以前的订单填充购物项目。例如，如果用户之前订购了铅笔盒或钢笔，我有这些数量计数和单个价格详细信息。我需要在他们的下订单屏幕上默认显示这些数量计数。 EX 铅笔盒有 10 个数量，该值必须显示在铅笔盒数量文本框的行中。我将以前的订单详细信息存储在本地存储中。我不知道如何检索并显示到数量文本框。谁能帮我做这件事。

在我的图像中，产品代码 1000 的数量计数为 1。我需要该计数需要显示在该特定产品数量文本框的下一个表格中。同样，如果我有更多的产品数量需要显示，反之亦然。谢谢大家

check this image

【参考方案1】：

您可以在 onChanges 中实现功能，并使用输入数据使您的表格成为内部组件 在每次更改中，您必须在本地存储中检测到 您还可以为具有主题变量的本地存储提供数据服务，您可以订阅表格组件中的每个更改

【讨论】：

对不起，我不明白。这是我的本地存储返回的数据 ["order_id":"9ec3bd80-91fc-0138-c8e0-0cc47ac946e0","product_code":"1000","quantity":1,"id":null]。我想将产品代码与服务器返回的 json 数据进行比较，如果产品代码匹配，我必须更新数量。

示例服务器返回 json "result":"success", "reason":"操作成功完成。", "api":"get_menus","locked":false, "payload": [ "macs_menu_id":"1047-2000000366", "header_text":null,"total_price":"2.18","product_code":"1000", menu_prod_cat":"WRIT", "quan_limit":0, ]

您可以为该组件实现自定义表，该组件给定来自父组件的数据并已从 onChanges 类实现，然后您可以查看数据的所有更改并将其设置为本地存储，如果您愿意，您可以共享您的代码

我已经在表格中显示了有效载荷数据。请在问题部分参考我的附加图片

在该图像中，您可以看到两个表。一个是从有效负载 json 数据生成的。另一个是从本地存储返回的数据创建的。