javascript - JavaScript 中数组中的对象未更新

Question

我正在 Angular 应用程序中编写几行 typescript 代码，构造函数中有几个 bool 变量，以及一个对象数组。该数组中每个对象的一部分都是由输入变量组成的。

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;

对此有何解释，以及如何避免这种情况？

Answer 1

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

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

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

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;
   }
}

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