无法从angular2中的子组件分配父组件中的数组

时间:2016-05-19 17:11:22

标签: javascript arrays angularjs angular

对此可能有一个简单的解释,请原谅我的无知。

使用子组件中的数组并对传递的值使用.pop().splice().push()时,它会保留父数组值,但是当我尝试分配时value(=)它不会将数组保留在父组件中。

我创建了一个simple example on Plunker

该程序有3个按钮,清除,弹出和重新加载。

清除列表 - 将@Input list分配给空数组(this.list = [])。请注意,父组件计数器不会更改

Pop - 在列表中执行.pop()。请注意,父组件计数器会更改。

为什么我不能简单地分配数组值?

  

我知道可以使用EventEmitter并让父母听   事件并以这种方式更新。我试图理解这一点   场景,看看我是否可以避免额外的代码。

1 个答案:

答案 0 :(得分:1)

父和子都有对同一个/一个数组对象的引用。因此,如果更改数组的元素(例如,修改数组元素,或添加或删除元素),父和子都会“看到”更改,因为更改发生在同一个/一个对象上。

如果在父级中分配新数组,则Angular更改检测会将新数组引用向下传播给子级,因为这是子级上的输入属性。

但是,如果在子项中分配新数组,则父项仍将具有对原始数组的引用。角度变化检测对您没有帮助。您必须通知父母这个新数组,例如,使用EventEmitter。