为什么 Angular 会覆盖原始变量？

Question

我是 Angular 的新手，所以希望这对外面的人来说很有意义，但我已经研究了几个小时了。

export class QuizComponent implements OnInit {

  originalArray: IArray[] = [];
  tempArray: IArray[] = [];

  constructor(
    private fetchService: FetchService
  ) {}

  ngOnInit(): void {
    this.originalArray = this.fetchService.getData();
    this.tempArray = this.originalArray
  }
  onWin() {
    this.tempArray = this.originalArray;
  }
}

export class FetchService {
  constructor() {}

  nameArray: IArray[] = [
    {name: 'John'},
    {name: 'Jade'},
    {name: 'Dave'},
    {name: 'Rose'},
  ];

  getData() {
    return this.nameArray;
  }
}

我希望发生的事情是，一旦有人获胜，我可以将 tempArray 恢复为 originalArray。不幸的是，每次修改 tempArray（使用 angular 拖放）时，originalArray 也会被修改 - 我在进行更改时记录了 originalArray 以确保情况如此 - 所以没有原始状态可以恢复。

我已经尝试了很多返回 getData 的不同变体，以及设置变量的不同方式 - 进出 ngOnInit() 和构造函数，直接在 QuizComponent 中，使其只读等

如有任何指示，我们将不胜感激。

编辑：有人回答了，然后立即删除了他们的回答，这就是我最终要做的。不管你是谁，谢谢！非常感谢其他帮助我的人。

this.tempArray = Object.assign([], this.originalArray);

Answer 1

试试这个

ngOnInit(): void {
    this.originalArray = this.fetchService.getData();
    this.tempArray = [...this.originalArray];
  }
  onWin() {
    this.tempArray = [...this.originalArray];
  }
}

解释请参考：

Answer 2

没有太多信息可以继续。但值得注意的是，您正在制作数组的浅表副本。请注意，在 Javascript 中，数组（或与此相关的对象）的副本作为引用传递。因此对一个变量的任何更改自然也会影响它的浅拷贝。

深层复制的一个快速解决方法是转换为字符串并返回

ngOnInit(): void {
  this.originalArray = JSON.parse(JSON.stringify(this.fetchService.getData()));
  this.tempArray = JSON.parse(JSON.stringify(this.originalArray));
}

onWin() {
  this.tempArray = JSON.parse(JSON.stringify(this.originalArray));
}

Answer 3

在原始数组上调用 .slice 克隆数组：

  ngOnInit(): void {
    this.originalArray = this.fetchService.getData();
    this.tempArray = this.originalArray.slice();
  }
  onWin() {
    this.tempArray = this.originalArray.slice();
  }

Clone an Array

为什么 Angular 会覆盖原始变量？

Why is Angular overwriting the original variable?

variables

overriding

typescript

angular