[英]Angular array content changes if condition is both true or false ? Unexpected behavior
I have 3 sibling components in angular.我有 3 个有角度的兄弟组件。 The first one is a sidebar that is calling an API that returns an array of objects.
第一个是调用返回对象数组的 API 的边栏。 I am populating an unordered list with a bunch of list items with the data that comes back.
我正在用返回的数据填充带有一堆列表项的无序列表。 This component is not relevant to the problem.
该组件与问题无关。
Then in the second component I am making a call to a method in a service that makes an API call that returns an object with various properties.然后在第二个组件中,我调用服务中的方法,该方法进行 API 调用,返回具有各种属性的对象。 Then on a click of a button I am calling another method that is checking if an array contains an object with the same property as the object that came back from the API.
然后单击一个按钮,我将调用另一个方法,该方法检查数组是否包含与从 API 返回的对象具有相同属性的对象。 If there is no such object, I add it to the array, if there is an object with the given property (id in my case) we do nothing.
如果没有这样的对象,我将它添加到数组中,如果有一个具有给定属性(在我的例子中是 id)的对象,我们什么都不做。
As it is too hard to explain the whole process I've tried to reproduce the whole scenario on that stackblitz example .由于很难解释整个过程,我试图在那个stackblitz 示例上重现整个场景。
Go check it, press the first button, then the second one.去检查一下,按第一个按钮,然后按第二个按钮。 What I can not understand is why when we click the first button and then the second the object in the array gets updated despite we are checking if the object exists in the array and if it does - we don't even make the call to the method in the service, but it still gets updated somehow.
我不明白的是,为什么当我们单击第一个按钮然后单击第二个按钮时,尽管我们正在检查对象是否存在于数组中以及是否存在,但数组中的对象仍会更新 - 我们甚至不调用服务中的方法,但它仍然以某种方式更新。 What am I missing here?
我在这里错过了什么?
@Jason White answer explains what's happening. @Jason White 的回答解释了正在发生的事情。 I would suggest alternative solution.
我会建议替代解决方案。 Do not update the object if the condition does not match:
如果条件不匹配,则不更新对象:
addToSlip(receivedObj, userPick, userPickValue) {
const found = this.slip.some(el => el.id === this.obj.id);
console.log(found);
if (!found) {
receivedObj.userPick = userPick;
receivedObj.userPickValue = userPickValue;
console.log("Not found, we add it to the array!");
this.service.addToSlip(this.obj);
} else {
console.log("Duplicate! We don't add it!");
}
}
When you call this.service.addToSlip(...)
you are passing in a reference to this.obj
so when it's added to the array in SlipService
, both arrays contain a references to the same object in memory.当您调用
this.service.addToSlip(...)
时,您传递的是对this.obj
的引用,因此当它被添加到SlipService
中的数组时,两个数组都包含对内存中同一对象的引用。 Updating one will update the other.更新一个将更新另一个。
Solution is to pass in a new copy into this.service.addToSlip()
解决方案是将新副本传递到
this.service.addToSlip()
// one way
this.service.addToSlip({...this.obj});
// another way (will make a deep copy)
this.service.addToSlip(JSON.parse(JSON.stringify(this.obj)));
Stackblitz: https://stackblitz.com/edit/angular-57xgmd
Stackblitz: https ://stackblitz.com/edit/angular-57xgmd
https://scotch.io/bar-talk/copying-objects-in-javascript
https://scotch.io/bar-talk/copying-objects-in-javascript
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.