首页
学习
活动
专区
工具
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格式字符串修改对应KeyValue,并保存到json字符串

一、前言 小编今天在工作工程,遇到了一个处理json字符串问题,经过半小时测试,最终解决了此问题!记录一下,为后来人铺路。...小编先说一下需求哈: 我们要把json字符串指定keyvalue修改并重新返回一个修改后json字符串!...(json); // 把jsonchilds拿出来新增一个对象 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

    8610

    使用tp框架SQL语句查询数据某字段包含某

    有时我们需要查询某个字段是否包含某时,通常用like进行模糊查询,但对于一些要求比较准确查询时(例如:微信公众号关键字回复匹配查询)就需要用到MySQL find_in_set()函数; 以下是用...find_in_set()函数写sq查询l语句示例: $keyword = '你好'; $sql = "select * from table_name where find_in_set('"....$keyword"',msg_keyword) and msg_active = 1"; 以下是在tp框架中使用find_in_set()函数查询示例: $keyword = '你好'; $where...数据库关键字要以英文“,”分隔; 2.存储数据要对分隔符进行处理,保证以英文“,”分隔关键字。...以上这篇使用tp框架SQL语句查询数据某字段包含某就是小编分享给大家全部内容了,希望能给大家一个参考。

    7.4K31

    如何在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.2K10

    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

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

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

    11410

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

    它还使最终项目包更小,以便分发。 在本教程,您将学习如何在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

    美国建站平台 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

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

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

    2.3K60

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

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

    42.6K10

    移除 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.4K10

    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文件

    5K20

    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 ,linte2e 。您可以在angular.json文件查看使用过构建器。 ...

    4.5K20

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

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

    11K30

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

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

    8.2K00

    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
    领券