ngModel 的副本也会受到影响

Question

我正在尝试通过此功能存储所有学生详细信息。考虑每个学生都有 name 和一个 array[] 命名的数字标记（为简单起见）

populate(){
    this.service.getAll()
    .subscribe(response=>{
      this.paginatedResponse = response
      this.students = this.paginatedResponse['result']
      this.studentsCopy = this.paginatedResponse['result']
    })
  }

考虑从 1 到 10 的总选项所以我正在使用 multi-select dropdown（自定义组件），并像这样输入 ngModel，考虑在 TS 中我用

制作了一个字典类型的数组

 options=[{id:1,text:"one",..... till 10]

<ng-container *ngFor="let student of students;let i = index">
<custom-multiselect
  [items]="options"
  [(ngModel)]="students[i].marks"
  (ngModelChange)="onSelection(i)"
  optionsKey="text"
  optionsValue="id"
></custom-multiselect>
</ng-container>

而且我有 onSelection 来输出 this.students.marks、this.studentsCopy.marks

所以一开始，让学生 1 的名字："Adam"，分数：[1,2,3] multiselect onload 最初显示 1,2,3 突出显示，因为 ngModel 绑定已完成，因为我 select mark:4 为他然后对于 this.students.marks 它显示 name:"Adam", marks:[1,2,3,4] 这是完全可以接受的，但是为什么this.studentsCopy.marks也显示一样，ngModel连接的是原始数据而不是复制权？

[编辑]：为此，

    console.log(this.routeCopy[index].roles)
    console.log(this.routeCopy[index].roles instanceof Array)
    this.routeCopy[index].roles = this.routeCopy[index].roles.push(333)
    console.log(this.routeCopy[index].roles)

我得到了 (2) [2, 1]

[2] which wen opened 说， 0:2 1:333

真 2 -> 不是数组而是数字

所以下次在 select 上它说 push 不是一个函数，因为它被转换为一个数字？为什么push后数组实例变成了数字？

Answer 1

这样试试：

this.studentsCopy = [...this.students]

或者，

this.studentsCopy = this.students.map(object => ({ ...object }))

扩展运算符 (...) 可用于在没有引用的情况下从另一个数组或对象初始化数组和对象（深度复制）

Answer 2

这是你的参考问题，你可以使用 lodash 解决这个问题

this.studentsCopy = _.cloneDeep(this.paginatedResponse['result']);

ngModel 的副本也会受到影响

Copy of ngModel also gets affected

html

angular-directive

angular