2

我的问题如下，

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

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 个字符串“无”、“低”、“中”、“高”。

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

出于测试原因，arrayTest() 函数连接到 html 中的一个按钮，该按钮在单击事件时触发它。单击“4”时，会立即将其添加到存储数组中。

这是项目商店：

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>

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

不中断的 this 方法的示例如下

零件：

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() 被触发时，存储不会更新，除非设置了调度，否则不会更新。

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

提前致谢！

4

1 回答 1

3

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

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

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

于 2018-04-17T15:36:52.440 回答