首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将表中编辑的旧值和新值保存到angular 2中的JSON中

在Angular 2中,可以通过以下步骤将表中编辑的旧值和新值保存到JSON中:

  1. 创建一个JSON对象,用于保存旧值和新值。可以使用{}来定义一个空的JSON对象。
  2. 在表格中,为每个需要编辑的单元格绑定一个双向数据绑定的变量。例如,可以使用[(ngModel)]来实现双向数据绑定。
  3. 在编辑完成后,通过监听表格的保存按钮或其他触发事件,触发一个保存函数。
  4. 在保存函数中,将旧值和新值保存到JSON对象中。可以通过比较旧值和新值来确定是否发生了变化。
  5. 最后,可以将JSON对象发送到后端进行进一步处理,或者在前端进行其他操作。

以下是一个示例代码:

代码语言:typescript
复制
// 在组件中定义一个JSON对象来保存旧值和新值
dataChanges: any = {};

// 在表格中绑定旧值和新值,并监听变化
<input [(ngModel)]="data.property" (ngModelChange)="saveChanges(data.property, 'property')">

// 保存函数,将旧值和新值保存到JSON对象中
saveChanges(newValue: any, property: string) {
  const oldValue = this.dataChanges[property];
  if (oldValue !== newValue) {
    this.dataChanges[property] = {
      oldValue: oldValue,
      newValue: newValue
    };
  }
}

在这个示例中,dataChanges对象用于保存旧值和新值。在表格中,使用双向数据绑定将旧值和新值绑定到输入框,并通过ngModelChange事件监听变化。在保存函数中,比较旧值和新值,如果发生了变化,则将其保存到dataChanges对象中。

请注意,这只是一个示例,具体实现可能会根据实际需求和项目结构有所不同。另外,根据具体情况,可能需要对JSON对象进行进一步处理或转换成其他格式进行存储和传输。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云对象存储(COS),腾讯云数据库(TencentDB),腾讯云人工智能(AI),腾讯云物联网(IoT Hub)等。你可以访问腾讯云官网(https://cloud.tencent.com/)了解更多关于这些产品的详细信息和使用指南。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Json格式的字符串修改对应Key的Value值,并保存到原json字符串中

一、前言 小编今天在工作工程中,遇到了一个处理json字符串的问题,经过半小时的测试,最终解决了此问题!记录一下,为后来人铺路。...小编先说一下需求哈: 我们要把json字符串中的指定key的value修改并重新返回一个修改后的json字符串!...(json); // 把json里的childs拿出来新增一个对象 String childs = JSONObject.parseObject(json).getString...toString()了一下,就出现多\和"找了好一会,分享一个去的方法,不是使用replace替换的!...不过已经过时了,大家有好的方法也可以评论区留言哈 String newString = StringEscapeUtils.unescapeJson("要被转化的json字符串"); ---- Q.E.D

2.4K10
  • JSON的基本操作,重点访问对象值点号(.)来访问对象的值和中括号()的区别

    ,使用中括号([])来访问属性的值:value在使用for遍历时,只能通过 myObj[x] 来获取相应属性的值,而不能使用 myObj.x** 实例 var myObj = { "name":"runoob...对象 value 可以是合法的 JSON 数据类型 1、JSON 对象中可以包含另外一个 JSON 对象: 实例 myObj = { "name":"runoob", "alexa":10000,...实例 x = myObj.sites.site1; // 或者 x = myObj.sites["site1"]; 修改值 1、你可以使用点号(.)来修改 JSON 对象的值: 实例 myObj.sites.site1...= "www.google.com"; 2、你可以使用中括号([])来修改 JSON 对象的值: 实例 myObj.sites["site1"] = "www.google.com"; 删除对象属性...1、我们可以使用 delete 关键字来删除 JSON 对象的属性: 实例 delete myObj.sites.site1; 2、你可以使用中括号([])来删除 JSON 对象的属性: 实例 delete

    9110

    如何在MySQL中获取表中的某个字段为最大值和倒数第二条的整条数据?

    在MySQL中,我们经常需要操作数据库中的数据。有时我们需要获取表中的倒数第二个记录。这个需求看似简单,但是如果不知道正确的SQL查询语句,可能会浪费很多时间。...在本篇文章中,我们将探讨如何使用MySQL查询获取表中的倒数第二个记录。 一、查询倒数第二个记录 MySQL中有多种方式来查询倒数第二个记录,下面我们将介绍三种使用最广泛的方法。...我们可以使用以下查询语句来实现: SELECT * FROM table_name ORDER BY id DESC LIMIT 1,1; 其中,table_name代表你的表名,id代表你的表中的一个自增...SELECT * FROM commodity ORDER BY price ASC LIMIT 1; 结论 在MySQL中获取表中的倒数第二条记录有多种方法。...使用排名,子查询和嵌套查询三者之一,可以轻松实现这个功能。使用哪种方法将取决于你的具体需求和表的大小。在实际应用中,应该根据实际情况选择最合适的方法以达到最佳性能。

    1.4K10

    AngularDart 4.0 高级-HTTP 客户端 顶

    它从服务中接收heroes并且在列表中展示它们.用户可以添加一个新的Hero并且保存到服务端. 下面是应用程序的UI: ? 此demo有一个单独的组件, HeroListComponent....hero 服务中的异步方法, getHeroes() 和 create(), 返回Future值(当前英雄列表和最近添加的英雄), 各自地....有关解码和编码JSON的示例,请参阅Dart库游览的dart:convert部分。 码后的JSON不会列出英雄。 相反,服务器将JSON结果封装到具有数据属性的对象中。...之后,请记住恢复其原始值。 发送数据到服务器 已经知道了如何使用远程HTTP服务恢复数据.下一项任务是添加增加英雄并保存到后端的能力....新英雄数据必须在请求体中,结构如同一个Hero 实体但是没有id 属性.下面是例子的请求体: { "name": "Windstorm" } 服务器生成id并返回新英雄的JSON表示,包括生成的ID。

    9.7K10

    设线性表中每个元素有两个数据项k1和k2,现对线性表按一下规则进行排序:先看数据项k1,k1值小的元素在前,大的在后;在k1值相同的情况下,再看k2,k2值小的在前,大的在后。满足这种要求的

    题目: 设线性表中每个元素有两个数据项k1和k2,现对线性表按一下规则进行排序:先看数据项k1,k1值小的元素在前,大的在后;在k1值相同的情况下,再看k2,k2值小的在前,大的在后。...D.先按k2进行简单选择排序,再按k1进行直接插入排序 答题思路: 首先我们要明确题意,这一题的排序是针对k1和k2全体进行的,而不是说我排好k1后,再对每组相同的k1进行k2的排序。...(不知道有没有人有这种想法,反正我第一次做时就是这么想的。但是这种排序方法要多一个对k1分组的时间,时间复杂度增大了)。 另外特别注意“在k1值相同的情况下,再看k2”这句话。...接着讨论要用的算法,题中没有给什么特殊的要求,所以我们要满足的只是“数据项k1,k1值小的元素在前,大的在后;在k1值相同的情况下,再看k2,k2值小的在前,大的在后”。...,可能k2不满足“在k1值相同的情况下,再看k2,k2值小的在前,大的在后”。

    12610

    如何在Ubuntu 14.04上使用Bower管理前端JavaScript和CSS依赖项

    它还使最终的项目包更小,以便分发。 在本教程中,您将学习如何在Ubuntu 14.04服务器上安装和使用Bower。...在接下来的步骤中,我们将会 制作一个新的Bower项目 用Bower安装Bootstrap 用Bower安装AngularJS 通过Nginx服务网站 在本教程结束时,在Bower Reference部分中...第3步 - 初始化Bower项目 现在,在/usr/share/nginx/html目录中,执行以下命令以创建一个新的Bower项目: bower init 您将被问到一系列问题。...现在,您的工作目录(/usr/share/nginx/html/)中应该有一个bower.json文件,其中包含上面输出中显示的JSON内容。...Yes 现在,如果使用该--save开关安装任何软件包,它们将保存到依赖项对象中的bower.json文件中。

    2.8K00

    全面解析C#中的异步编程为什么要异步过去糟糕的体验一个新的方式Tasks基于任务的异步编程模型Async和await时间处理程序和无返回值的异步方法结束语

    在.NET Framework5.0种,微软为我们系统了新的语言特性,让我们使用异步编程就像使用同步编程一样相近和简单,本文中将会解释以前版本的Framework中基于回调道德异步编程模型的一些限制以及新型的...而在如今的.NET中,提供了非常接近于同步编程的编程体验,不需要开发人员再去处理只会在异步编程中出现的很多情况,异步调用将会是清晰的且不透明的,而且易于和同步的代码进行组合使用。...Tasks Task和Task类型已经存在于.NET Framework 4.0中,一个Task代表一个进行时的活动,它可能是一个运行在单独线程中的一个CPU密集型的工作或者一个IO操作,手动的创建一个不工作在单独线程的任务也是非常容易的...下文中将介绍一些TAP中的约定,包括怎么处理“取消”和“进行中”,我们将进一步讲解基于任务的编程模型。...时间处理程序和无返回值的异步方法 异步方法可以从其他异步方法使用await创建,但是异步在哪里结束?

    2.3K60

    美国建站平台 Wix 的架构变迁

    在初期,Wix有一个大型的Flash产品,包括了建站编辑器和Flash型站点,在2011年时改用了HTML5/Javascript结构,后来采用了React框架 Wix 的100多个微服务可以分为4个组...,建站编辑器使用JS开发,编辑结果使用JSON表达,然后把JSON保存到Mysql,用户上传的资源文件保存到 WixMP 多媒体文件系统 技术上也是 Scala,Jetty,Spring,Mysql 为什么使用...这种方式带来不少便利,例如不同数据中心间的复制很方便,根据主键查找非常快,即使在巨型表中,通常也只需要1毫秒的响应时间 在2012年,Wix 开放了应用SDK,允许第三方为网站创建组件,例如博客、CRM...Hadoop,Pig,HBase,Storm 微服务是基于JVM上的独立应用,使用 Jetty,Spring MVC,自己开发的框架等 服务间的沟通使用 JSON/RPC 和 ActiveMQ 存储使用...Mysql,MongoDB 前端开发工具箱中有 Angular,React,和编译测试工具

    2.9K40

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    所以,让我们开始走向我们的目标,首先,让我们将项目从CSS切换到Sass,然后打开我们的.angular-cli.json编辑styles和styleExt属性: "styles": [ "styles.scss...您可以通过编辑prefix属性将其更改为首选项的前缀.angular-cli.json,因此ng generate在首次使用前最好先这样做。 所以,我们有一个组件的构造ngOnInit函数和一个函数。...因此,我们只需编写简单的代码即可获取我们的价值,并将其绑定到代码中的输入值和变量。...,并观察在我们的输入中输入新值时会发生什么: ?...通过使用它,我们确保我们的数据流一旦发生this.alive错误就会停止发布新值,并且我们只需在该onDestroy组件的函数中设置该值。

    42.7K10

    移除 View Engine 转用 Ivy,盘点Angular 12的重要更新

    Angular 12 版本的最大亮点就是淘汰掉了旧的 View Engine 编译与渲染管道,转而采用更为现代的 Ivy 技术。...移除 View Engine,转而使用 Ivy 从去年开始,Angular 就开始默认使用新的渲染和编译工作管线 Ivy。...由于 View Engine 函数库的存在,Angular 暂时还无法移除旧的实例化,这导致维护成本不断增加,Angular 整体发展速度也被拖慢。...APP-INITIALIZER 令牌的类型有所变更,旨在准确反映 Angular 处理的返回值类型。同样属于重大变化。...在表单中,引入最小与最大值验证器。 新版本可导出 HTTP 状态码列表。 向 Angular 语言服务添加一项功能,允许用户直接访问使用模板文件的组件的实际位置。

    4.5K10

    Angular10配置webpack打包 「详细教程」

    使用CLI创建一个新的Angular项目 从零搭建Angular10项目 先决条件 在开始之前,请确保你的开发环境已经包含了 Node.js® 和 npm 包管理器。...第四步:编辑你的第一个 Angular 组件 组件 是 Angular 应用中的基本构造块。 它们在屏幕上显示数据、监听用户输入,并根据这些输入采取行动。...该工作空间的顶层包含着全工作空间级的配置文件、根应用的配置文件以及一些包含根应用的源文件和测试文件的子文件夹。 工作空间配置文件 用途 .editorconfig 代码编辑器的配置。...README.md 根应用的简介文档. angular.json 为工作区中的所有项目指定 CLI 的默认配置,包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项,比如 TSLint,Karma...hash {Boolean} false 如果是,true则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。

    5.1K20

    Angular v8 发布!来看看有什么新功能

    先瞅一眼 Ivy Ivy 是 Angular 世界下一个望眼欲穿的大新闻,它是新的 Angular 编译器,也是新的渲染管道。...为了确保 CLI 在翻译和捆绑主程序时不再考虑这些文件,ng generate worker 将相同的文件模式放在 tsconfig.app.json 的 exclude 部分中。...其背后的想法是提供两组 bundle:一组基于 ECMAScript 5 并且针对较旧的浏览器,另一组基于较新的 ECMAScript 版本,例如 ECMAScript 2015,以此为现代浏览器提供上述优势.../lazy/lazy.module').then(m => m.LazyModule) 4} 新的书写风格中仍然包含文件名作为魔术值。但是由于许多IDE支持导入,因此无效值将立即返回错误。...ngUpgrade的新功能 到目前为止,AngularJS 1.x 和 Angular 与 ngUpgrade 的混合操作中存在的一个问题是:两个框架的路由有时一直在争夺 URL。

    3K30

    Angular8稳定版修改概述

    这允许在现代用户代理和旧用户代理中的经典脚本中选择性地执行模块脚本. SVG作为模板 您现在可以将SVG文件用作模板。到目前为止,我们只能选择使用内联HTML或外部HTML作为模板。...它不是完全正常运行(选择预览),正如Igor Minar在ngConf 2019中建议的那样,视图引擎仍然推荐用于新应用。...”: {“enableIvy”:true} 您也可以使用新引擎创建新应用程序 ng new my-app --enable-ivy Ivy将提供以下优势,Angular 9中预计前3个功能: 编译速度更快...正如Igor Minar所解释的那样,Bazel已经在内部使用了很长时间,现在可供所有人使用。您可以参考Bazel文档,并了解如何将其与Angular一起使用。...angular使用builders进行主要操作:serve ,build ,test ,lint和e2e 。您可以在angular.json文件中查看使用过的构建器。 ...

    4.5K20

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    在此页面中,您将进行以下改进。 从服务器获取英雄数据。 让用户添加,编辑和删除英雄的名字。 将更改保存到服务器。 您将教会应用程序对远程服务器的Web API进行相应的HTTP调用。...你离开的地方 在前一页中,您学会了在仪表板和固定英雄列表之间导航,沿途编辑选定的英雄。 这是这个页面的起点。 在继续英雄之旅之前,请确认您具有以下结构。 ?...响应JSON有一个单一的数据属性,它拥有主叫方想要的英雄列表。 所以你抓住这个列表并把它作为已解决的Future值返回。 请注意服务器返回的数据的形状。...,处理程序将创建的命名的英雄委托给英雄服务,然后将新的英雄添加到列表中。...您将HeroService扩展为支持post(),put()和delete()方法。 您更新了组件以允许添加,编辑和删除英雄。 您配置了内存中的Web API。 您了解了如何使用Streams。

    11K30

    IntelliJ IDEA - 2022.2 正式发布!众多特性解读!

    全局更改字体大小的键盘快捷键 有一个新的键盘快捷键可以更改编辑器中各处的字体大小。要增加字体大小,请按⌃⇧Period。要减小它,请按⌃⇧Comma。...JSON、YAML 和 .properties 字符串值中的可点击 URL JSON、YAML 和 .properties 文件现在具有在以http://和https://...将本地 Docker 镜像上传到 Minikube 和其他连接 现在可以使用新的Copy Docker Image操作轻松地将图像从一个 Docker 守护程序复制到另一个,该操作将图像保存到文件中,然后将其推送到所选连接...修改对话框的新 UI “修改”对话框的新 UI已成为默认选项。从版本 2022.2 开始,可以使用此新 UI 添加和编辑表格的所有子对象。旧 UI 将通过上下文菜单保持可用。...Web开发 支持 Angular 独立组件 我们一直在积极致力于 IntelliJ IDEA 2022.2 中对 Angular 14 的支持。

    5.3K40

    Angular2 :从 beta 到 release4.0 版本升级总结

    Angular 模块是带有 @NgModule 装饰器函数的类。 @NgModule 接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。...它标记出该模块拥有的组件、指令和管道, 并把它们的一部分公开出去,以便外部组件使用它们。 它可以向应用的依赖注入器中添加服务提供商。 具体请参考官方文档。...在webstorm里,更改文件不能在浏览器中更新输出。 原因:webstorm里面默认启用”safe write”,将保存先存到临时文件。...原因:angular(v4.1.1)中,使用ActivatedRoute的API获取路由信息。...= 'detail';//查看、编辑、添加 ... // 其余代码 } ... // 其余代码 新代码: import { ActivatedRoute } from '@angular

    8.2K00

    Angular 5.0.0发布!

    保留空白 过去编译器会忠实地复现并在模板中包含制表符、换行符和空白。现在你可选择是否在组件和应用中包含空白了。 可以在每个组件的装饰器中指定这个配置,而当前的默认值为true。...、日期和货币管道 我们写了新的数值、日期和货币管道,让跨浏览器国际化更方便,不需要再使用i18n的腻子脚本(polyfill)。...如果你还没条件使用新管理,可以导入 DeprecatedI18NPipesModule以降级到旧的行为。...Angular表单添加updateOn Blur/Submit 这样可以根据 blur或 submit来运行验证和更新值的逻辑了,不必再单纯依赖input事件。...这些新操作符消除了副作用,以及之前导入操作符中“patch”方法存在代码切割和“tree shaking”等问题。

    4.4K40
    领券