Avoid Angular/TypeScript variable binding

Question

I need to create a clone of my object, without creating it's reference. When I try to copy EquipmentClass, witch is my main object to it's clone, and if I change some property of EquipmentClass it will change my EquipmentClassCloneEdit also. And I don't want that to happen.

I tried to assign the value like this:

this.equipmentClassCloneEdit = Object.assign({}, this.equipmentClass);

this is my model:

export class EquipmentClass {
    equipmentClassId: number;
    name: string;
    description: string;
    isDeleted: boolean;
    propertyValuesList: EquipmentClassPropertyValue[] = [];
}

score 1 · Accepted Answer · answered Jul 19 '19 at 19:05

1

Try this.equipmentClassCloneEdit = JSON.parse(JSON.stringify(this.equipmentClass))

Object.assign() creates a shallow copy, so it wouldn't work on non-primitives like your propertyValuesList array.

answered Jul 19 '19 at 19:05

Jordan Hui

36
5

score 1 · Answer 2 · answered Jul 19 '19 at 19:23

You can use lodash's cloneDeep method to do a deep clone. https://lodash.com/docs/#cloneDeep

install 'lodash' package
import cloneDeep from 'lodash/cloneDeep';
just call it: this.equipmentClassCloneEdit = cloneDeep(this.equipmentClass);

Using this kind of cloning functions is better from stringify and then parse solution as it also keeps members which JSON ingores when stringifying, like, Functions, Symbols, BigInts etc.

Avoid Angular/TypeScript variable binding

2 Answers2