数组中的对象未在 JavaScript 中更新答案

【问题标题】：Object in array is not updating in JavaScript数组中的对象未在 JavaScript 中更新
【发布时间】：2020-06-16 04:25:49
【问题描述】：

我在一个Angular应用程序中写了几行打字稿代码，构造函数中有几个布尔变量，还有一个对象数组。这个数组中每个对象的一部分是由输入变量组成的。

selftest: boolean;
failed: boolean;

    locoStateItems = [
    {
        name: 'FAILED',
        isSelected: this.failed
    },
    {
        name: 'SELFTESTED',
        isSelected: this.selftest
    }

稍后在另一个函数中

toggleMe(name: string){
   if (name === 'FAILED') {
       this.failed = !this.failed
   } else if(name === 'SELFTESTED'){
       this.selftest = !this.selftest;
   }
}

在 DOM 中显示的 locoStateItems 不会受到影响，除非我明确编写以下内容

locoStateItem[0].isSelected = this.failed;
locoStateItem[1].isSelected = this.selftest;

对此有何解释，如何避免？

【问题讨论】：

函数中的this没有引用你需要引用的对象。即便如此，boolean 是一个原语，对象中最初分配的值也不会改变。

标签： javascript arrays typescript object

【解决方案1】：

这是因为 boolean 是一个原语，这意味着您只是在声明数组时分配值。这不会分配对布尔变量的引用，因此它们不会在数组的对象中自动更新。

如果您打算保留此结构，则必须手动更新数组对象的布尔值。

根据我的假设，您应该将函数更改为：

toggleMe(name: string){
   if (name === 'FAILED') {
       this.failed = !this.failed;
       this.locoStateItem[0].isSelected = this.failed;
   } 
   else if(name === 'SELFTESTED'){
       this.selftest = !this.selftest;
       this.locoStateItem[1].isSelected = this.selftest;
   }
}

我不确定这种方法的目的是什么，但从你的问题中我可以看出这应该是有效的。

【讨论】：

感谢您的完整回答:)