Angular 为什么ngrx存储通过更改组件内部的阵列来直接更新？

我的问题是,

我通过以下代码订阅我的商店

export class PrioritySelectComponent implements OnInit, OnDestroy {

  @Input('preset') preset: number; 

  prioritySettingSub: Subscription
  priorities: string[]

  selection: number;

  constructor(
    private store: Store<fromApp.AppState>
  ) { }

  ngOnInit(): void{
    this.prioritySettingSub = this.store.select('projectState').subscribe(data => {
      this.priorities = data.prioritySettings
    })
    if(this.preset !== undefined) {
      this.selection = this.preset
    }
  }

  arrayTest() {
    const potato = '4'
    let newArr = this.priorities
    newArr.push(potato);
  } // this updates the store immediately when run 


  ngOnDestroy(): void{
    this.prioritySettingSub.unsubscribe();
  }

}

这是html模板

<mat-form-field>
  <mat-select placeholder="Priority" [(ngModel)]="selection">
    <mat-option *ngFor="let level of priorities, let i = index" [value]="i">{{level}}</mat-option>
  </mat-select>
</mat-form-field>

<button (click)='arrayTest()' >terst</button>

{{level}}
特斯特

当我对对象、字符串或数字执行完全相同的操作时，不会发生这种情况

这种方法的一个不中断的示例如下

组成部分：

export class TextInputComponent implements OnInit, OnDestroy {


  textsub: Subscription
  textValue: string;

  constructor(
    private store: Store.fromApp<AppState>;
  ) { }

  ngOnInit(): void {
    this.textsub = this.store.select('textinput').subscribe(data => {
      this.textValue = data.textValue
    })
    this.textValue = this.presetValue;
  }

  ngOnDestroy() {
    this.textsub.unsubscribe()
  }

  stringtest(){
    const potato = '4'
    let test = this.textValue
    test = potato;
  }

}

导出类TextInputComponent实现OnInit、OnDestroy{
textsub：订阅
textValue：字符串；
建造师(
私人商店：store.fromApp；
) { }
ngOnInit（）：void{
this.textsub=this.store.select（'textinput'）。订阅（数据=>{
this.textValue=data.textValue
})
this.textValue=this.presetValue；
}
恩贡德斯特罗（）{
this.textsub.unsubscribe（）
}
stringtest（）{
常量马铃薯='4'
让test=this.textValue
试验=马铃薯；
}
}

html:

<mat-form-field >
  <input matInput [(ngModel)]="textValue" name="textValue" >
</mat-form-field>

<button (click)='stringtest()' ></button>

触发stringtest（）时，存储不会更新，除非设置分派，否则不会更新

阵列的这种问题在我的应用程序中的多个位置发生，我选择这一个是因为它简单。在每种情况下，都是数组导致了问题，为什么会出现这种情况，如何修复这种行为

---

提前谢谢

如果要复制数组而不是保留原始引用（这就是问题的原因），可以使用

slice（）

来复制：

this.priorities=data.prioritySettings.slice（0）；

---

您的

优先级

现在将有一个包含所有相同内容的新数组。数组的内容仍将具有相同的引用，因此，如果您在其中有一个对象并对其进行了修改，您仍将修改存储中的对象。

您在组件中的“制作数组副本”位置在哪里？我没有看到你在任何地方复制。我看到您在这里将一个新变量指向数组

让newArr=this.priorities

但这不是复制数组。ngOnInit（）：void{this.prioritysetingsub=this.store.select（'projectState'）.subscribe（数据=>{this.priorities=data.prioritySettings}）我在Ngoninit中设置了订阅内部的数组，它没有制作副本。这是将您的

priorities

属性指向

数据所指向的同一内存位置。prioritySettings

请阅读OO编程中通过值和引用传递的概念以及诸如此类的内容。如果您使用的是外部l像lodash这样的库，请使用.\u cloneDeep来复制对象。我如何在需要时创建一个真正的副本？这也会克隆对象？因为你似乎对编程比较新，我建议使用像lodash这样的库来帮助你完成这项工作，以确保正确完成。他们有一种深度克隆方法我会处理好这一切的。

<mat-form-field >
  <input matInput [(ngModel)]="textValue" name="textValue" >
</mat-form-field>

<button (click)='stringtest()' ></button>