javascript - 修改 Javascript 对象副本会使原始对象在 Angular 5 Reactive Forms 中发生变化

Question

我正在尝试创建我的反应式表单值对象的副本（使用扩展运算符或 Object.assign）并在将其发送到我的服务器之前对其应用一些更改。

这是构建我的表单的代码，它在我的模板中按预期工作：

newTask: FormGroup

this.newTask = this.formBuilder.group({
      partner:              [null, [Validators.required]],
      title:                [null, [Validators.required, Validators.minLength(5), Validators.maxLength(50)]],
      description:          [null, [Validators.minLength(10), Validators.maxLength(120)]],
      responsible:          [null, [Validators.required]],
      type:                 [null, [Validators.required]],
      priority:             [null, [Validators.required]],
      status:               [null, [Validators.required]],
      history:              this.formBuilder.array([])
    })

下面的代码说明了如何在历史数组中添加和删除元素：

createAction (action?) {
    return this.formBuilder.group({

      title: [action ? action.title : undefined, [Validators.required, Validators.minLength(5), Validators.maxLength(50)]],
      description: [action ? action.description : undefined, [Validators.required, Validators.minLength(10), Validators.maxLength(200)]],
      resolveAt: [action ? action.resolveAt : undefined],
      result: [action ? action.response : undefined, [Validators.minLength(10), Validators.maxLength(200)]],
      resolvedAt: [action ? action.resolvedAt : undefined],
      status: [action ? action.status : undefined, [Validators.required]],
      relatedPerson: [action ? action.relatedPerson : undefined]

    })
  }

  addAction (action?): void {
    const history = this.newTask.get('history') as FormArray
    history.push(this.createAction(action || initialActionState))
  }

  removeAction (i: number): void {
    const history = this.newTask.get('history') as FormArray
    history.removeAt(i)
  }

在用户正确输入所有需要的数据后，当我提交表单时，这是我必须执行的修改：

let cleanVar = {...this.newTask.value}
// I could also use let cleanVar = Object.assing({}, this.newTask.value), the result is the same
    cleanVar.history.forEach(item => {
      item.status = item.status.string
      if (item.relatedPerson) item.relatedPerson = item.relatedPerson._id
    })
console.log(this.newTask.value)

如您所见，我正在尝试修改原始对象的副本，但是当我记录 this.newTask.value 时，更改也会传播到它。

我以前从未在对象副本方面遇到过这样的问题，所以我试图找出为什么会发生这种情况。也许它与我无法检测到的 Angular Reactive Forms 相关。

有人知道为什么会这样吗？

谢谢！

更新

这是我的 newTask.value 变量中的内容：

标签： javascriptangular5javascript-objectsangular-reactive-formsspread-syntax

Answer 1

正如 marekful 和 Rikin 建议的那样，使用 lodash cloneDeep 是要走的路：

import { cloneDeep } from 'lodash'

let clonedVar = cloneDeep (originalVar)

// do whatever you need with clonedVar and originalVar isn't touched

感谢大家！