angular - 为什么 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 （使用角度拖放）时， originalArray 也会被修改 - 我在进行更改以确保是这种情况时记录了 originalArray - 所以没有原始状态可以恢复。

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

任何方向将不胜感激。

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

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

标签： angulartypescriptvariablesoverriding

Answer 1

试试这个

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

解释请参考：Cloning an array in Javascript/Typescript