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

Angular 8:为什么我的不可观察类型会在从其复制的数据被更新时被更新?

Angular是一种流行的前端开发框架,而Angular 8是Angular的一个版本。在Angular中,不可观察类型(Observable)是用于处理异步数据流的一种方式。当从不可观察类型复制数据时,如果数据被更新,复制的数据也会被更新。

这种行为是由于不可观察类型的特性所决定的。不可观察类型是基于观察者模式的,它允许组件订阅数据的变化,并在数据发生改变时接收通知。当你从一个不可观察类型复制数据时,实际上是将数据的引用复制给了新的变量,而不是将数据的值复制给新的变量。因此,当原始数据被更新时,新复制的数据也会跟随更新。

为了解决这个问题,可以使用深拷贝来复制不可观察类型中的数据,而不是简单的引用复制。深拷贝将复制数据的所有层级,而不仅仅是引用。这样,即使原始数据发生改变,复制的数据仍然会保持不变。

在Angular中,可以使用rxjs库提供的cloneDeep函数来进行深拷贝操作。例如,可以按照以下步骤进行深拷贝:

  1. 导入cloneDeep函数:import { cloneDeep } from 'rxjs/internal/operators/cloneDeep';
  2. 使用cloneDeep函数进行深拷贝:const copiedData = cloneDeep(originalData);

这样,copiedData将是原始数据的一个深拷贝,即使原始数据发生改变,copiedData也会保持不变。

关于Angular 8的更多信息,可以参考腾讯云的相关产品和文档:

  • 腾讯云服务器less云函数:提供基于事件驱动的无服务器云函数服务,可用于快速开发和部署Angular应用。了解更多信息,请访问腾讯云函数产品页面
  • 腾讯云对象存储COS:提供高可扩展的云端存储服务,可用于存储和管理Angular应用中的静态资源。了解更多信息,请访问腾讯云对象存储产品页面

请注意,上述提供的腾讯云产品仅作为示例,其他云计算品牌商可能提供类似的产品和服务。

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

相关·内容

Angular2 脏检查过程

这就是为什么变更检测路径是有向树而且不可以带有闭环的原因。这种结构让检测系统极其高效。更重要的是,它可以保证系统具备更强的可预测性,并且更加方便debug。 有多快?...Immutable(不可变)对象 如果一个组件只依赖于它的那些输入属性,而这些属性是不可变类型,那么只有当其中一个输入属性发生变化的时候这个组件才会发生改变。...此功能并没有绑定到任何一个特定的库上面。把Angular切换到其它任何observable library都只需要修改几行代码而已。 可观察对象会导致级联更新吗?...可观察对象名声比较差,因为它们可能会导致级联更新。有使用过基于可观察模型的框架来构建大型应用经验的人都知道我在说什么。一个可观察对象发生更新可能会导致一大堆可观察对象触发更新,然后就这样一直级联下去。...你可以只在应用里面的某个局部使用可观察对象(例如,在某个巨大的table里面),然后那个部分就可以获得巨大的性能提升。你甚至可以构建基于两种数据类型的组件,从而可以同时获得它们所带来的好处。

2.7K80

MobX 背后的基础原理

像 Meteor、Knockout、Angular、Ember 和 Vue 这样的框架都显露了与 MobX 类似的反应式行为,且都已经存在很久了。那为什么我要建立 MobX 呢?...我接受不可预测性的存在,挺正常的,对于 Flux 模式特别是 Redux 来说之所以流行的最重要的原因之一便是:它精确处理了规模变大时的可预测性问题,除此之外并无任何神奇之处。...modifiers 不是“尽快把这个弄好”的意思,而是表示“只观察对象的引用,将对象本身视为超出控制的黑盒子”。 这种概念在处理不可变数据类型的时候也非常合适。...一个可行的例子是,创建一个可观察的消息 map,消息本身是不可变数据结构的。 第二个问题是自动可观察集合总是创建“克隆”,这并不总是可以接受的。Proxy 总是产生一个新对象,并只以“一个方向”工作。...在 MobX 中不通知观察者就无法升级数据,也会引入在应用中存在过期数据的可能性,这就违背了 MobX 的理念。人们有时希望有这种机制,但我还没遇到过概念上无法解决的实际用例。

1.6K10
  • 从单向到双向数据绑定0.前言1.单向数据(代表:react)2.观察者模式3.双绑的中间枢纽——Object.defineproperty(代表:vue)4. 脏值检测(代表:angular1)前面说

    这里除了单向数据绑定,当你改变$scope.data,p标签的内容也是会马上改变。...因为用了定时器,他会异步地将数据反映上去。...2.观察者模式 首先,我们先订阅事件,比如事件‘a’,回调函数是function (){console.log(1)},订阅后,如果事件‘a’被触发了,就调用回调函数。...我们的例子其实不用观察者模式都可以实现双绑,但是在实际应用中肯定也不可以不用观察者模式,为了代码可读性和可维护性以及拓展性。...脏值检测(代表:angular1) 前面说的定时器双绑是扯淡 前面特地埋了个坑,关于Angular脏检查,并不是一些人想象的那样子用定时器周期性进行脏检测(我前面写的那个超级简单的双绑就是人们传闻的angular

    1.6K40

    哔哩哔哩面试官:你可以手写Vue2的响应式原理吗?

    整体流程 作为一个前端的MVVM框架,Vue的基本思路和Angular、React并无二致,其核心就在于: 当数据变化时,自动去刷新页面DOM,这使得我们能从繁琐的DOM操作中解放出来,从而专心地去处理业务逻辑...因为大部分同学只是知道:Vue的响应式原理是通过Object.defineProperty实现的。被Object.defineProperty绑定过的对象,会变成「响应式」化。...一段话总结原理 上面说了那么多,下面我总结一下Vue响应式的核心设计思路: 当创建Vue实例时,vue会遍历data选项的属性,利用Object.defineProperty为属性添加getter和setter...对数据的读取进行劫持(getter用来依赖收集,setter用来派发更新),并且在内部追踪依赖,在属性被访问和修改时通知变化。...每个组件实例会有相应的watcher实例,会在组件渲染的过程中记录依赖的所有数据属性(进行依赖收集,还有computed watcher,user watcher实例),之后依赖项被改动时,setter

    39930

    Vue全家桶

    MVVM 架构中,是不允许数据和视图直接通信的,只能通过ViewModel 来通信,而 ViewModel 就是定义了一个Observer观察者- ViewModel 能够观察到数据的变化,并对视图下对应的内容进行更新...Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。...这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。...这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同,所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。...每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。

    40420

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

    对我而言,最好使用更智能的编辑器vim,因为它会为代码中的任何错误提供额外的补充,因为TypeScript是强类型的。...我们很快会讨论输入和组件通信,但现在,我们只需要记住,最好使用常量的构造函数,比如实际上被硬编码到组件ngOnInit中的东西,以及依赖于外部的所有东西数据。...我们在我们的组件中订阅我们的观察器。它们被用在我们应用程序的不同部分,所以它们可能会一路销毁 - 例如,当我们在路由中使用组件作为页面时(我们将在本指南后面讨论路由)。...为什么这样?我们正在从Firebase获得观察结果。但是,我们*ngFor在CardList组件中等待对象数组,不能观察这些数组。...让我们再往前走一步,并确保如果我们的应用程序状态将包含多种类型的数据,我们从每种类型的单独孤立状态进行组合。

    42.7K10

    再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    当 view 中有任何数据变化时,会更新到 model ,当 model 中数据有变化时,view 也会同步更新,显然,这需要一个监控。 双向数据绑定的原理?...当你写下表达式如{{ val }}时,AngularJS在幕后会为你在scope模型上设置一个watcher(表达式将被 Angular 编译成一个监视函数),它用来在数据发生变化的时候更新view。...当浏览器接收到可以被 angular context 处理的事件时,$digest 循环就会触发,遍历所有的 $watch,最后更新 dom。...在脏检测的机制下,这个过程毫无压力,一次做完所有数据变更,然后整体应用到界面上。这时候,基于setter的机制就惨了,除非它也是像Angular这样把批量操作延时到一次更新,否则性能会更低。...ng-click中写的表达式,能使用JS原生对象上的方法,比如Math.max之类的吗?为什么? 不可以。

    7.9K40

    React 教程:React 快速上手指南

    我很不喜欢对库进行比较,特别是当我们被迫把梨和苹果放在一起进行比较时。 因此,我将尝试使用一系列简短的问题和答案将 React 与 Angular 和 Vue 进行比较。...在这里我更倾向于 Vue,但这只是我个人的意见。至于为什么?因为你不需要懂 JSX(它是可选的),它基本上只是 HTML + CSS + JavaScript。...这种方法有其自身的优点,因为你可以增加原来不可用的东西(例如装饰器)来增强你的应用,但它也可能是令人头疼的问题,因为它需要花费更多的时间去配置许多额外的文件。...“‘s”})) setState([object / function like above], () => {}) —— 这个表单允许我们附加 callback,当 state 显示我们想要的数据时被调用...总结 这是我们的React教程的第一部分。在后续的文章中,我们会设计更多高级主题,包括样式和类型检查,以及生产部署和性能优化。

    1.4K30

    前端三大框架vue,angular,react大杂烩

    摘要:从angular的诞生独步天下,到现在三大框架平分天下,基本形势已经趋于稳定。每一个框架从诞生到受欢迎,都有其特定的原因和背景。不同的开发者选择时,也是依据于其特定情景下的原因和背景。...这似乎也是暗示了vue,angularjs,react这三个框架的不可替代性啊,也不知道当时这三个框架的作者起名时的想表达的特殊含义是什么,但偏偏就刚好对上了。...$watch时只为它传递了一个参数,无论作用域中的什么东西发生了变化,这个函数都会被调用。在ng-model中,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用新值来更新模型数据。...Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。...Virtual DOM:    提供了函数式的方法描述视图,它不使用数据观察机制,每次更新都会重新渲染整个应用,因此从定义上保证了视图与数据的同步。

    3K90

    前端三大框架vue,angular,react大杂烩

    摘要:从angular的诞生独步天下,到现在三大框架平分天下,基本形势已经趋于稳定。每一个框架从诞生到受欢迎,都有其特定的原因和背景。不同的开发者选择时,也是依据于其特定情景下的原因和背景。...这似乎也是暗示了vue,angularjs,react这三个框架的不可替代性啊,也不知道当时这三个框架的作者起名时的想表达的特殊含义是什么,但偏偏就刚好对上了。...$watch时只为它传递了一个参数,无论作用域中的什么东西发生了变化,这个函数都会被调用。在ng-model中,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用新值来更新模型数据。...Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。...Virtual DOM:    提供了函数式的方法描述视图,它不使用数据观察机制,每次更新都会重新渲染整个应用,因此从定义上保证了视图与数据的同步。

    2.1K60

    如何在 2022 年为 Web 应用程序选择技术堆栈

    为 Web 开发选择技术堆栈时要考虑的事项 正如我在介绍中解释的那样,选择技术堆栈对于您正在从事的项目至关重要。所需的时间和成本,以及最终产品的整体质量,都直接受到您的选择的影响。...此外,请记住您的应用程序的演变。您的网络应用程序将来肯定需要技术支持和更新。因此,在选择技术堆栈时,请考虑您对应用程序未来开发的计划:也许您想让它在其他设备上可用?或者想添加一些额外的功能?...该框架非常适合复杂、高级的 Web 应用程序。如果你想在 Angular 上构建一个 Web 应用程序,你需要在开发开始之前就对其进行彻底的规划。...JS 还支持复杂的动画,这对创造出色的用户体验有很大贡献。 JavaScript 非常流行,并且可能会保持其地位多年。超过 97% 的网站是在客户端使用 JavaScript 构建的。...它用于金融和科学项目,拥有强大的 SQL 引擎,能够轻松处理大量数据。 mysql。它可以确保高性能和可扩展性,并且适用于大多数类型的应用程序。 雷迪斯。当需要超快的响应时间时,这是一个不错的选择。

    87930

    React vs Angular,到底那个更好用

    它具有一种树形组织结构,使得脚本能够动态地与 Web 文档的内容及结构进行交互,并对它们实现更新。 DOM 有两种类型:虚拟和真实。...Angular 中的双向数据绑定类似于“模型 - 视图 - 控制器(Model-View-Controller,MVC)”的体系结构, 由于其中的模型和视图是同步的,因此数据的变更会影响到视图上,而视图的更改也会反过来触发数据相应的变更...React 则使用单向或向下的数据绑定。单向数据流不允许子元素在更新时影响到父元素,因此保证了只有已获准的组件才会发生更改。...总的说来,React 的单向数据绑定更具备可预测性,代码更为稳定,调试也更加容易。而 Angular 中的传统双向数据绑定,则易于被使用。...开发人员在从 Web 应用处移植业务逻辑,并在其 UI 上使用相同的操作技巧时,该工具允许 iOS 和 Android 平台共享大约 90% 的代码。

    5.7K60

    前端三大框架大杂烩

    摘要:从angular的诞生独步天下,到现在三大框架平分天下,基本形势已经趋于稳定。每一个框架从诞生到受欢迎,都有其特定的原因和背景。不同的开发者选择时,也是依据于其特定情景下的原因和背景。...这似乎也是暗示了vue,angularjs,react这三个框架的不可替代性啊,也不知道当时这三个框架的作者起名时的想表达的特殊含义是什么,但偏偏就刚好对上了。...在ng-model中,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用新值来更新模型数据。...Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。...Virtual DOM:   提供了函数式的方法描述视图,它不使用数据观察机制,每次更新都会重新渲染整个应用,因此从定义上保证了视图与数据的同步。

    2.6K50

    mysql数据库面试题目及答案_数据库面试常问问题

    Page Dictionary 类似于字典的目录结构,根据主键大小,每隔 4-8 个纪录设置一个槽,用来纪录其位置,当根据主键查找数据时,首先一步到位找到数据所在的槽,然后在槽中线性搜素。...它对数据库中数据的改变是持久的,即使数据库发生故障也不应该对其有任何影响。 4、事务的并发问题? 脏读、幻读和不可重复读。 ref 并发事务带来的问题 5、什么是脏读、幻读和不可重复度?...更新锁:U 锁,用来预定要对资源施加 X 锁,允许其他事务读,但不允许再施加 U 锁或 X 锁。 当被读取的页将要被更新时,则升级为 X 锁,U 锁一直到事务结束时才能被释放。...乐观锁(Optimistic Lock):顾名思义,从主观上认定资源是不会被修改的,所以不加锁读取数据,仅当更新时用版本号机制等确认资源是否被修改。 乐观锁适用于多读的应用类型,可以系统提高吞吐量。...主从同步的目标就是把主数据库的 binlog 文件中的 SQL 语句复制到从数据库,让其在从数据的 relaylog 文件中再执行一次这些 SQL 语句即可。

    40970

    mysql数据库面试题目及答案_数据库面试题2021

    Page Dictionary 类似于字典的目录结构,根据主键大小,每隔 4-8 个纪录设置一个槽,用来纪录其位置,当根据主键查找数据时,首先一步到位找到数据所在的槽,然后在槽中线性搜素。...它对数据库中数据的改变是持久的,即使数据库发生故障也不应该对其有任何影响。 4、事务的并发问题? 脏读、幻读和不可重复读。 ref 并发事务带来的问题 5、什么是脏读、幻读和不可重复度?...更新锁:U 锁,用来预定要对资源施加 X 锁,允许其他事务读,但不允许再施加 U 锁或 X 锁。 当被读取的页将要被更新时,则升级为 X 锁,U 锁一直到事务结束时才能被释放。...乐观锁(Optimistic Lock):顾名思义,从主观上认定资源是不会被修改的,所以不加锁读取数据,仅当更新时用版本号机制等确认资源是否被修改。 乐观锁适用于多读的应用类型,可以系统提高吞吐量。...主从同步的目标就是把主数据库的 binlog 文件中的 SQL 语句复制到从数据库,让其在从数据的 relaylog 文件中再执行一次这些 SQL 语句即可。

    67510

    Top JavaScript Frameworks & Topics to Learn in 2017

    在此阶段的数据更新不能重新触发渲染,直到下一个绘图阶段。 事件处理阶段 - 在渲染 DOM 之后,React 侦听和事件,将事件委托给其 DOM 树根(为了更好的性能)的单个事件侦听器。...这与双向数据绑定形成对比,其中对DOM的改变可以直接更新数据(例如,如在Angular 1和 Knockout 的情况下)。...React 没有规定数据管理系统,但推荐使用基于 Flux 的方法。 React 的单向数据流方法借鉴了函数式编程和不可变数据结构的思想,改变了我们对前端框架架构的思考方式。...掌握它们真的需要相当多的实践。 EDIT: 为什么我没有列举出的那些框架>? 很多人问我,“为什么没有列举出他们喜欢的框架?” 因为其中一个重要标准是,“在工作中能被真正的用上”。...你可能会看到 Angular 在这些列表中比 React 有显着的优势。 为什么我依然推荐优先学习 React?

    2.3K00

    为什么现在的开发者总是拿 Vue.js 和 JavaScript 巨头 Angular、React 比较?

    本文会试图揭示为什么开发者越来越相信 Vue.js 将会成为顶级的 JavaScript 库,为什么 Vue 将会让 Angular 和 React 望尘莫及。 ?...但是,Vue.js 正在从这些成功的 JavaScript 库——比如 Angular——中吸取精华,所以很快也会变得很强大。...和 Angular2 相似,Vue 也支持“双向数据绑定”。但是,Vue 使用的是单向数据流,默认数据流向是从父组件到子组件,这样在大型应用中能够更容易理清数据流向。...当存在大量 watcher 的时候,任何变化都会触发所有 watcher,所以 Angular1 的性能会降低。...更糟糕的是,有时候 Angular 的使用者找不到什么方法来优化使用了大量 watcher 的作用域。 因为 Vue 使用了具有异步排队功能的透明的依赖关系跟踪观察系统,所以完全没有这方面的后顾之忧。

    1.9K30

    Angular React Vue我应该选择什么?

    我不是律师,所以如果 React 许可证对你或你的公司有问题,你应该自己决定。关于这个话题还有很多文章:Dennis Walsh 写到,你为什么不该害怕。...我不是律师,所以如果 React 许可证对你或你的公司有问题,你应该自己决定。关于这个话题还有很多文章:Dennis Walsh 写到,你为什么不该害怕。...Angular,React 与 Due 的 Github Star 历史 (数据来源) 数据来源 更新: 感谢 Paul Henschel 提出的 npm 趋势。...Redux 是在采用阶段(被 ThoughtWorks 项目采用的!),它在许多 ThoughtWorks 项目中的价值是不可估量的。Vue.js 是在试用阶段(被试着用的)。...当 UI 元素(例如,用户输入)被更新时,Angular 的双向绑定改变 model 状态。React 只有一种方法:先更新 model,然后渲染 UI 元素。

    2.9K20
    领券