时间戳

首页 > 解决方案 > 在不重新创建整个对象的情况下更改对象数组的属性值

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

问题描述

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

我有一个像这样的对象数组

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
}

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

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

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 并更新展开状态。我刚刚更新了整个索引块，它工作正常，有人可以关闭这个问题吗？

标签： angulartypescriptobjectionic-frameworkionic5

解决方案

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

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

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

let objArray = [newObj, newObj, newObj];

在那种情况下，数组的每个元素都是对同一个对象的引用，因此更改一个值似乎会改变它们。

推荐阅读