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[] = [];
}

Jordan Hui · Accepted Answer · 2019-07-19 19:05:11Z

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, 2019 at 19:05

Jordan Hui

366 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tigran Grigoryan · Accepted Answer · 2019-07-19 19:23:38Z

1

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.

answered Jul 19, 2019 at 19:23

Tigran Grigoryan

111 bronze badge

Collectives™ on Stack Overflow

Avoid Angular/TypeScript variable binding

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related