Question

我在AngularJS 1.6中遇到问题有一些混乱。我正在迭代一个名为aList的对象数组，其中包含HTML部分中的可变对象。

<div ng-repeat="item in aList>
   <a ng-click = "updateDataFun(item)">Click</a>
</div>

现在在控制器中我有这个

constructor(){
    this.updateData = {};
}
updateDataFun(item){
   // this.updateData = Object.assign({}, item); // this solve the issue. 
   this.updateData = item; 
}
cancelUpdate(){
   this.updateData = {}
}

现在，在模态上，我有类似<input ng-model="updateData.name">

的东西

如果我通过模式更改任何内容（名称，updateData的属性）并按cancelUpdate()，则更改会反映到aList数组。

以下是一些问题：

在updateDataFun(item)方法中，赋值是引用赋值（假设）。我对吗？因此，如果我通过模式更改this.updateData，则会反映item。另外，更改与aList关联的item索引值。
如果是，那么在cancelUpdate()次调用时，this.updateData将为{}。 为什么这不会反映item？ 它应该是{} 。

但是，如果我取消注释this.updateData = Object.assign({}, item);并评论this.updateData = item;，那么它就可以了。

Answer 1

javascript通过引用而不是按值传递对象所以这一行是你的问题：

this.updateData = item;

此行通过引用传递项，因此您对此变量所做的所有更改都将影响源列表项。建议的解决方案是复制对象而不是通过引用传递它像这样：

this.updateData = JSON.parse(JSON.stringify(item)); // create new item in the memory and assign it to updateData variable

您可以使用您想要的任何其他克隆方法或仅使用您需要的值创建新对象

修改抱歉错过了你的问题，

你正如前面所解释的那样，

写作时

变量= {} 意思是你不要将变量的引用改为空对象，您将新（和空）对象分配给变量（而不是对象的引用）

希望得到它的帮助

Answer 2

正如yaron所建议的那样，您假设this.updateData引用了来自item的个人aList是正确的。因此，当您在任何地方更改this.updateData的属性时（即使在模态中，如果模态也接收到引用），它也会反映到列表中。

但是，在cancelUpdate()中，您指定一个空对象来代替该引用（将item引用替换为对其他内容的引用）。对item的引用被破坏，因此不会反映从该时间开始的任何变化（包括分配空对象）。如果您要将{}分配给item，则必须直接更新列表或直接改变item对象（而不是重新分配）。

this.updateData = Object.assign({}, item)将项目克隆到一个全新的对象并将其引用存储到this.updateData，因此任何更改都不会反映到item。

AngularJS在理解克隆对象和引用赋值时遇到麻烦

2 个答案: