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

为什么ngModel在传递新对象时会导致无限循环,而Input不会呢?

ngModel在传递新对象时会导致无限循环,而Input不会的原因是因为它们在Angular中的工作方式不同。

ngModel是Angular中的一个双向数据绑定指令,用于将表单控件的值与组件中的属性进行双向绑定。当使用ngModel绑定一个对象时,Angular会对对象进行深度比较,以确定对象是否发生了变化。如果对象发生了变化,Angular会触发变更检测机制,导致组件重新渲染。而在重新渲染时,ngModel又会重新绑定新的对象,从而形成了无限循环。

Input是Angular中的一个单向数据绑定指令,用于将组件中的属性值传递给子组件或模板中的表单控件。当使用Input绑定一个对象时,Angular只会进行浅比较,即只比较对象的引用是否发生了变化,而不会比较对象的属性值是否发生了变化。因此,当传递新对象时,对象的引用发生了变化,但属性值没有发生变化,所以不会触发重新渲染,也就不会导致无限循环。

总结起来,ngModel在传递新对象时会导致无限循环,是因为它进行了深度比较,而Input不会导致无限循环,是因为它进行了浅比较。为了避免ngModel导致的无限循环,可以使用ChangeDetectionStrategy.OnPush策略,或者使用Immutable对象来确保对象的引用不会发生变化。

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

相关·内容

Angular—都2019了,你还对双向数据绑定念念不忘

AngularJs接下来会设置$watch,进入digest循环,然后循环检测等等,背后发生的一切各位看官有兴趣自行google,这里就不再赘述。...$event可以视作获取输出的关键字,不同场景下代表的对象是不同的,上面这段代码中由于是监听了input事件,所以它代表的就是 InputEvent,通过属性查询我们获取到了事件上传递的值。...不看源码的情况下,如果是让你去实现 ngModel 这个指令,相信你肯定有思路。 肯定要把输入属性 ngModelinput元素的value值关联起来。...赋值的时候直接用的是event,不是event.target.value。这也很容易,要内部实现时取出inputEvent对象的值传递给 ngModelChange 就Ok了。...输入+输出===双向绑定 现在,我们只需要使用简写写法把它们合起来,这就是‘双向绑定’ 为什么这样写组件中的数据会被修改?

4.4K30

AngularDart4.0 指南- 模板语法二 顶

绑定通过一个名为$event的事件对象传递关于该事件的信息,包括数据值。 事件对象的形状由目标事件决定。...Angular中你不需要这些指令。 通常,您可以使用功能更强大,表现力更强的Angular绑定系统获得相同的结果。 当你可以写一个简单的绑定时为什么要创建一个指令来处理点击?...字符串“let hero of heroes”是指: 取英雄列表中的每个英雄,将其存储本地英雄循环变量中,并使其可用于每次迭代的模板HTML。...例如,重新查询服务器可能会重置所有的英雄对象的列表。 大多数,如果不是全部,以前显示的英雄。 你知道这一点,因为每个英雄的ID没有改变。 但是Angular只能看到对象引用列表。...想象一下,诸如a.b.c.d这样的长属性路径中的某个地方防止空值。 Angular安全导航操作符(?.)是一种更为流畅和方便的方法来防止属性路径中出现空。表达式达到第一个空值时会被释放。

30K20
  • Angular 从入坑到挖坑 - 组件食用指南

    通过使用 $event 作为方法的参数会将许多用不到的模板信息传递到组件中,导致我们仅仅是为了获取数据的前提下,却需要对于页面元素十分了解,违背了模板(用户所能看到的)与组件(应用如何去处理用户数据)...,会获取到条数据的索引值 当渲染的数据发生改变时 4,会导致 dom 元素的重新渲染,此时可以采用 trackBy 的方式,通过组件中添加一个方法,指定循环需要跟踪的属性值,此时当渲染的数据发生改变时...子组件中引入 Inupt,同时使用 @Input 装饰器来接收父组件传递的数据 // 引入 Input 接口 import { Component, OnInit, Input } from '@angular...被绑定的输入属性值发生变化时触发,会调用多次;如果没有使用到父子组件传值,则不会触发 ngOnInit 初始化组件时会调用一次,一般是用来构造函数之后执行组件复杂的初始化逻辑 ngDoCheck 只要数据发生改变就会被调用...dom 初始化时会被全部创建, attribute 是 html 标签上定义的属性和值 =》DOM 中 Property 和 Attribute 的区别↩ 这里的数据改变指的是会将原来的数据对象重新销毁然后重建的过程

    15.8K30

    angularjs 表单验证

    最小长度 验证表单输入的文本长度是否大于某个最小值,输入字段上使用指令ng-minleng= "{number}": 3...ng对此也提供了非常棒的解决方案,表单的属性可以在其所属的$scope对象中访问到,而我们又可以访问$scope对象,因此JavaScript可以间接地访问DOM中的表单属性。...这个方法会更新控制器上本地的$viewValue,然后将值传递给每一个$parser函数(包括验证器)。...注意,单独调用$setViewValue()不会唤起一个的digest循环,因此如果想更新指令,需要在设置$viewValue后手动触发digest。...$setViewValue()方法适合于自定义指令中监听自定义事件(比如使用具有回调函数的jQuery插件),我们会希望回调时设置$viewValue并执行digest循环

    6.7K70

    AngularJs指令解密

    讨论链接和编译设置时会详细介绍,模板元素或属性与实例元素或属性之间的区别。 实际生产中,更好的选择是使用templateUrl参数引用外部模板,因为多行文本阅读和维护起来都是一场噩梦。...Object) scope参数是可选的,默认为false: false:直接调用相同的作用域对象; true:从当前作用域对象继承一个的作用域对象对象:创建一个同当前作用域相隔离的作用域对象。...这样做可以将任意内容和作用域传递给指令。...compile用于对模板自身的转换,link负责模型和视图之间进行动态关联 link函数能够访问scope作用域对象compile不会,因为在编译阶段,scope对象还不存在。...ng-model属性提供的表达式 所有步骤都完成后,\$viewChangeListeners中所有的监听器都会被调用 单独调用\$setViewValue()不会唤起一个的digest循环,因此如果想更新指令

    2.2K70

    探索Angular 1.3 的单次绑定(one -time bindings)

    然而,为了实现数据绑定,Angular需要时刻监听相关的值,这就导致了性能问题,单次绑定就是为此而生。...</button>; 点击按钮,就会将字符串Christoph赋值给name同时会触发$digest循环,DOM也就是相应自动更新。特殊的情况下我们只单向(top → down)更新值。...然而,譬如input元素有个一个ngModel的指令,随着用户输入,input的value属性值随之改变,同时这些变化也会映射到实际的模型。...那么,什么是单次绑定?...那么,当我们使用单次绑定到底是怎么样子的?Angular 1.3带来了的插入指令和表达式以此来告诉Angular这个特殊的插入值应该被只绑定一次。 使用单次绑定我们只需要以::开始表达式即可。

    3.1K10

    浅谈Angular

    指令 语法: [(ngModel)]='值' ***直接写指令,angularJS里会报错,需要人为的引入FormsModule模块 3.指令: 结构型指令 1....来控制元素的显隐 自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务 如果自定义指令想要接收从外部传入的值,需要使用@Input装饰器\.... 参数订阅(RxJS) 遇到的问题:数据不会及时更新,原因:组件的ngOnInit方法只会在其被创建时走一次,如果该组件不销毁,init方法不会再走,导致当前数据无法更新 解决办法...从Observable的中文名:”可观察的”就能看出,Observable的作用是可以起到类似监听的作用,但它的监听往往都是跨页面中, 6.组件间通信: 1.父向子 -- @Input装饰器声明输入属性...,要声明子组件里 2.子向父 -- @Output装饰器声明事件,要声明子组件里 3.兄弟之间 -- 中间人模式 拓展:事件源对象 事件中,当前操作的那个元素就是事件源。

    4.4K10

    AngularDart4.0 指南- 模板语法一 顶

    事件循环的一个回合期间,依赖值不应该改变。如果一个幂等表达式返回一个字符串或一个数字,当它在一行中调用两次时会返回相同的字符串或数字。...事件循环的这个周期中,您可以自由地在任何地方进行所有更改。 像模板表达式一样,模板语句使用了一种看起来像Dart的语言。...以下示例中,将模板$ event对象,模板输入变量(let hero)和模板引用变量(#heroForm)传递给组件的事件处理方法。...它需要一个的心智模式。 HTML开发的正常过程中,您可以使用HTML元素创建一个可视结构,并通过使用字符串常量设置元素属性来修改这些元素。...这个初始值永远不会改变。 一次性字符串初始化标准HTML中是常规的,并且它对于指令和组件属性也同样适用。

    5.2K10

    避坑手册 | JAVA编码中容易踩坑的十大陷阱

    如果在循环中添加或删除元素,是直接调用集合的add(),remove()方法,导致了modCount增加或减少,但这些方法不会修改迭代实例中的expectedModCount,导致迭代实例中expectedModCount...对于一个引用类型而言,参数传递的时候,本质上是将一个引用对象对应内存地址传递过去,参数对象与实际对象指向同一个内存块。...所以,编码的时候,要注意不能在方法里面对入参进行重新赋值,可以采用返回值的方式返回个的结果对象,然后进行赋值操作。...上面的示例代码中,虽然最后finally里面也有执行流的关闭操作,但是try分支中,inputStream是一个for循环里面被多次创建了,最终finally分支中仅关闭了最后一个,之前的流都处于未关闭状态...然而实际上,运行之后,输出结果为: 0.30000000000000004 这是因为浮点数是不精确的,因为浮点数是存在小数点位的,十进制的0.1换算为二进制是一个无限循环小数,所以实际上存储的其实是一个近似

    42630

    Resize Observer 介绍及原理浅析

    .... window.resize - JS 方案 resize 事件只有当 viewport 的大小发生变化时会被触发,元素大小的变化不会触发 resize 事件;并且也只有注册 window 对象上的回调会在...,从而出现无限循环的监关系。... ResizeObserver 的回调中对 dom 进行操作,比如改变另外一个元素的大小,或是隐藏/展示某个元素,这些操作可能会导致的回调调用,引发无限循环,最终导致界面 UI 卡死。...还有另外一种场景是,监听函数中创建的 ResizeObserver 实例,导致循环的每一次迭代都有的元素需要通知,那么最终循环就会因为内存溢出终止,这里不作过多讨论。...如果避免无限循环 无限循环的场景是真实存在的,想要避免无限循环的出现,我们需要给循环过程加上一些限制,以此来解除循环

    3.3K40

    前端二面react面试题整理

    =形式传值 子组件中使用props来获取值子组件给父组件传值 组件中传递一个函数 子组件中用props来获取传递的函数,然后执行该函数 执行函数的时候把需要传递的值当成函数的实参进行传递兄弟组件之间传值...为此,React将构建一个的 React 元素树(您可以将其视为 UI 的对象表示)一旦有了这个树,为了弄清 UI 如何响应的状态改变,React 会将这个树与上一个元素树相比较( diff )...这就是为什么 react 需要重新渲染整个 vdom, vue 不用。这个问题也导致了后来两者架构上逐渐有了差异。...为什么这样就可以打断了?因为现在不再是递归,而是循环了:function workLoop() { while (wip) { performUnitOfWork(); } if (!...useEffect 被设计成了 dom 操作前异步调用,useLayoutEffect 是 dom 操作后同步调用。为什么这样

    1.1K20

    Netty网络编程第五卷

    提交普通任务会不会结束select阻塞 5.wakeup方法中代码如何理解 6.每次循环的时候,什么时候会进入SelectStrategy.SELECT分支 7.何时会select阻塞,会阻塞多久 8...., 并且该线程执行完run方法后不会销毁,会进入死循环不断寻找的任务执行 答案:当首次调用execute方法的时,nio线程启动,并且通过一个state状态位来控制线程只会启动一次...提交普通任务会不会结束select阻塞 书接上回,当nio线程创建完毕启动后,会进入一个死循环 新创建出来的nio线程不仅处理io事件,其他任务来了也需要处理,因此nio线程不能无限阻塞下去...thread 如果是nio线程自己去提交任务,不会执行wakeup(),它内部有唤醒的机制 为什么需要防止wakeup被重复调用?...很简单,通过一个循环计数解决 每循环一次,计数加一 既然通过计数来防止空轮询bug,那么如何避免不是空轮询,而是真正有事件发生的循环导致计数累加?

    39630

    (转) 别再对 Angular 表单的 ControlValueAccessor 感到迷惑

    网上有大量文章描述如何实现这个接口,但很少说到它在 Angular 表单架构里扮演什么角色,如果你不仅仅想知道如何实现,还想知道为什么这样实现,那本文正合你的胃口。...对象会被 NgModel 指令隐式创建(译者注:可查看 Angular 源码这一行): @Directive({ selector: '[ngModel]...是隐式还是显式创建,都必须和原生 DOM 表单控件如 input,textarea 进行交互,并且很有可能需要自定义一个表单控件作为 Angular 组件不是使用原生表单控件,通常自定义表单控件会封装一个使用纯...本文我将使用原生表单控件术语来区分 Angular 特定的 formControl 和你 html 使用的表单控件,但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互,不是原生表单控件如...组件封装器 由于 Angular 为所有默认原生控件提供了控件值访问器,所以封装第三方插件或组件时,需要写一个的控件值访问器。

    3.8K20

    面试官:如何解决React useEffect钩子带来的无限循环问题

    因此,许多新手开发人员配置他们的useEffect函数时,会导致无限循环问题。本文中,您将了解不同场景下带来的无限循环问题以及如何解决它们。...这是我们今天要学习的内容: 是什么导致无限循环以及如何解决它们: 依赖项数组中不传递依赖项 使用函数作为依赖项 使用数组作为依赖项 使用对象作为依赖项 传递不正确的依赖项 什么导致无限循环以及如何解决它们...依赖项数组中不传递依赖项 如果您的useEffect函数不包含任何依赖项,则会出现一个无限循环。...因此,这会导致一个无限循环: 是什么导致了这个问题?让我们一步一步来分析这个问题: 第一次渲染时,React会检查count的值。...这将返回一个可变对象,确保引用不会改变: }, [myArray]); //依赖值是稳定的,所以没有无限循环 使用对象作为依赖项 useEffect依赖数组中使用对象也会导致无限循环问题。

    5.2K20
    领券