在不重新创建整个对象的情况下更改对象数组的属性值答案

【问题标题】：Changing property value of Array of Objects without recreating the entire Object在不重新创建整个对象的情况下更改对象数组的属性值
【发布时间】：2020-11-13 20:38:01
【问题描述】：

如何在不重新创建整个对象的情况下更改对象数组中的单个元素？

我有一个这样的对象数组

objArr = [{
  icon: 'add',
  iconAdd: 'add',
  iconRemove: 'remove',
  expand: false
},
{
  icon: 'add',
  iconAdd: 'add',
  iconRemove: 'remove',
  expand: false
}]

我的函数获取被点击元素的 ID，然后我想更新该索引的展开元素。

updateObjArr(index) {
  this.objArr[index].expand = !this.objArr[index].expand
}

但是，这会更新 ALL 数组中的展开值。当我真的只想更新指定的索引时。

我尝试将当前索引对象分配给一个临时变量，然后以这种方式更改它，但出现了同样的问题。

let tempItemHolder = this.objArr[index];
tempItemHolder.expand = !tempItemHolder.expand;

this.objArr[index] = tempItemHolder;

我发现唯一有效的方法是创建整个对象

updateObjArr(index) {
  this.objArr[index] = {
                         icon: 'add',
                         iconAdd: 'add',
                         iconRemove: 'remove',
                         expand: true
                       }
}

但是当我只想更改单个值时，这似乎没有必要，iconAdd 和 iconRemove 将始终保持不变。

还有其他方法吗？或者这就是 Typescript 对象的工作方式？

编辑

这个错误很可能是我设置的结果。这是一个遍历我的内容的 NgFor 循环，因为我正在尝试构建 Accordion 列表（不创建额外的组件）。

OnClick，我为该元素传入索引 I 并更新展开状态。我刚刚更新了整个索引块，它工作正常，有人可以关闭这个问题吗？

【问题讨论】：

提供的代码sn-p在逻辑上是正确的。您能否提供更多信息，例如调用 updateObjArray() 方法的函数，或过程中调用的方法。

标签： angular typescript object ionic-framework ionic5

【解决方案1】：

使用下面的代码。

this.updateObjArr(1);

   updateObjArr(index) {
    this.objArr[index].expand = !this.objArr[index].expand;
  }

【讨论】：

【解决方案2】：

看来肯定有更多事情发生，因为this.objArr[index].expand = !this.objArr[index].expand 只会更新指定索引处的对象。我怀疑您在创建数组时重复使用相同的对象，或者更新函数被每个索引调用。

当我说使用相同的对象时，我的意思是：

let newObj = {
  icon: 'add',
  iconAdd: 'add',
  iconRemove: 'remove',
  expand: false
};

let objArray = [newObj, newObj, newObj];

在这种情况下，数组的每个元素都是对同一个对象的引用，因此将一个值更改为一个值似乎会全部更改。

【讨论】：