我有一个组件,它在订阅的页面上显示一些数据.
我试图克隆该变量并对其进行更改,而不会影响用于呈现页面视图的原始数据.
import { UtilsService } from '../shared';
import { Component,Input,OnInit } from '@angular/core';
@Component({
selector: 'app-review',templateUrl: './review.component.html',styleUrls: ['./review.component.css']
})
export class ReviewComponent implements OnInit {
@Input() payload: any = null;
// Object of strings that are used for the details
langStr: any = {
noDepartment: 'No Department Change',noSegment: 'No Segment Change',noMarket: 'No Budget Market Change',noIncentive: 'No Incentive Plan Change',noRole: 'No Role Change',noProductionDate: 'No Production Date Change',noLanguage: 'No Language Change',noShift: 'No Shift Change',noSupervisor: 'No Supervisor Change'
};
// Used to scan through the final payload and assign default values if missing
optionalFields = ['budgetMarket','hierarchy','incentivePlan','primaryLanguage','secondaryLanguage','role','segment','shiftID','supervisor'];
modifiedData: any;
constructor(
private utils: UtilsService
) {
}
ngOnInit() { }
submitChanges() {
this.modifiedData = this.payload;
// Loop over all of the keys in our formData object
for (const key in this.modifiedData.formData) {
// Find shift by property if the key exists within our defined array
if (this.modifiedData.formData.hasOwnProperty(key) && this.utils.isInArray(this.optionalFields,key)) {
// If our object data doesnt have a value,set it to -1
if (!this.modifiedData.formData[key].length) {
this.modifiedData.formData[key] = '-1';
}
}
}
// Send to database
console.log(this.modifiedData)
}
}
在上面的这种情况下,我试图将我订阅的this.payload数据设置为一个名为modifiedData的新变量.然后我修改了该任务中的一些数据.
但是,只要我调用函数submitChanges(),我的HTML视图就会获得对modifiedData所做更改的更新,即使它没有订阅它.
我认为它与this.modifiedData = this.payload有关;以某种方式更新原始数据(有效载荷).
解决方法
你没有克隆这个对象.您只是将对该对象的引用分配给另一个变量.它们都指向完全相同的对象.
如果你想实际克隆你的对象,你基本上有两个选择：
首先,简单,有点hacky并且要小心使用,因为不会涵盖所有内容：
this.modifiedData = JSON.parse(JSON.stringify(this.payload));
会给你一个基本克隆的新对象.
如果你想拥有一个更强大的克隆,你必须通过遍历你的对象并从头开始创建一个新的手动来手动完成它(或者使用像lodash这样的库,它有这个方法).
更新只是为了完成：其他答案建议this.modifiedData Object.assign({},this.payload)和this.modifiedData = {… this.payload};这对于简单而非嵌套的对象来说很好,因为它们都是浅拷贝而不是对象的深拷贝.
由于JSON.parse(JSON.stringify(obj)将忽略除了对象,数组,数字和字符串以及布尔值之外的所有内容,因此最好的选择仍然是手动克隆(或使用像lodash一样的库).
