Копия 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 имеет имя: "Адам", отмечает: [1,2,3] На нагрузке мультиселекта изначально подсвечивается 1,2,3, поскольку привязка ngModelготово, так как я выбираю для него mark: 4, затем для this.students.marks, которое он показывает, name: "Adam", marks: [1,2,3,4], что вполне приемлемо, но почему this.studentsCopy.marksтакже показывая то же самое, ngModel подключен к исходным данным, а не к праву на копирование?

[EDIT]: для этого

    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], который был открыт, говорит: 0: 2 1: 333

true 2 -> не массив вместо числа

Так что next время при выборе говорит, что push не является функцией, поскольку он был преобразован в число? почему экземпляр массива после нажатия стал числом?

Answer 1

Попробуйте так:

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

или,

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

Оператор распространения (...) можно использовать для инициализации массивов и объектов из другого массива или объекта без ссылки(Глубокое копирование)

Answer 2

Это ваша справочная проблема, вы можете решить ее с помощью lodash

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