Question

我的问题如下，

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

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

}

优先级设置是一个包含在我的商店中的数组，其中包含4个字符串＆＃39;无＆＃39;，＆＃39;低，＆＃39;中＆＃39;，＆＃39;高＆＃39;。

我正在我的商店订阅中制作数组的副本，并在组件内部使用它。但是如果我更新副本（优先级），而不使用调度，商店会立即更新。

出于测试原因，arrayTest（）函数连接到html中的一个按钮，该按钮在click事件中触发它。点击后＆＃39; 4＆＃39;立即被添加到商店阵列。

这是项目商店：

export interface ProjectState {
    projects?: Project[];
    prioritySettings: string[];
    addProjectError: boolean
}

const initialProjectState = {
  projects: [],
  prioritySettings: ['None', 'Low', 'Medium', 'High'],
  addProjectError: false
};

//reducer logic...

这是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>

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

此方法不会中断的示例如下

组件：

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

}

html：

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

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

当stringtest（）被触发时，商店不会更新，除非设置了调度，否则不会更新。

这个数组问题发生在我的应用程序的多个地方，我选择这个简单。在每种情况下，它都是导致问题的数组，为什么会这样，我该如何解决这个问题呢？

提前致谢！

Answer 1

如果您想复制数组而不是保留原始引用（这就是您遇到问题的原因），可以使用slice()制作副本：

this.priorities = data.prioritySettings.slice(0);

您的priorities现在将拥有一个包含所有相同内容的新数组。尽管如此，数组的内容仍然具有相同的引用，如果你有一个对象并进行修改，你仍然会修改你商店中的那个。

为什么通过更改组件内的数组直接更新ngrx存储？

1 个答案: