javascript - 如果条件同时为真或假， Angular 数组内容会发生变化？意外行为

Question

我有 3 个 Angular 兄弟组件。第一个是侧边栏，它调用返回对象数组的 API。我正在用一堆列表项和返回的数据填充一个无序列表。该组件与问题无关。

然后，在第二个组件中，我调用服务中的方法，该方法进行 API 调用，返回具有各种属性的对象。然后，单击按钮后，我将调用另一个方法，该方法检查数组是否包含与从 API 返回的对象具有相同属性的对象。如果没有这样的对象，我将其添加到数组中，如果存在具有给定属性(在我的例子中为 id)的对象，我们什么都不做。

由于很难解释整个过程，我尝试重现整个场景 stackblitz example .

去检查一下，按第一个按钮，然后按第二个按钮。我无法理解的是，为什么当我们单击第一个按钮，然后单击第二个按钮时，尽管我们正在检查该对象是否存在于数组中以及是否存在，但数组中的对象会更新 - 我们甚至不调用服务中的方法，但它仍然会以某种方式更新。我在这里缺少什么？

Answer 1

@Jason White 的回答解释了发生了什么。我会建议替代解决方案。如果条件不匹配，则不更新对象:

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!");
  }
}