克隆对象TypeScript

Question

我正在使用TypeScript处理Angular 2.我有用户管理组件,我有整个用户的表.

当单击表中的任何用户时,然后形成具有要编辑的整个属性的外观.选择用户发生事件如下:

 onUserSelected(event) {
        var selectedId = event.data.id;
        this.selectedUser = this.users.filter(user => user.id === selectedId)[0]
    }

问题是当正在编辑selectedUser时,他的属性也会在表中发生变化而且看起来不太好.我尝试自己创建副本如下,但它没有帮助 - 用户类

 clone() {
        var cloned = new User(this.id, this.login, this.name, this.surname, this.phone);
        return cloned;
    }

也许我正在做一些在Angular2中不好的做法？

Answer 1

尝试使用

this.user = Object.assign({}, currentObject);

正如@AngularFrance所提到的,这只适用于浅复制对象,如果需要深层复制对象,则寻求另一种实现.

Answer 2

你可以使用lodash:

https://lodash.com/docs#cloneDeep

lodash建议用于大量对象/数组操作

Answer 3

您可以将编辑器表单绑定到空的User对象,editUser而不是selectedUser变量(指向用户集合的元素).在您的中onUserSelected(event),您将editUser通过克隆所选用户对象的可变属性进行初始化.提交编辑表单((ngSubmit)="editSubmit()")后,您将替换用户集合中所选用户对象中的原始属性.

有点像:

editUser: User = new User();
selectedId: number;
selectedUser: User;

onUserSelected(event) {
    this.selectedId = event.data.id;
    this.selectedUser = this.users.filter(user => user.id === this.selectedId)[0];
    this.editUser = this.simpleClone(this.selectedUser);
}

editSubmit(event) {
    this.selectedUser = this.simpleClone(this.editUser);
}

simpleClone(obj: any) {
    return Object.assign({}, obj);
}

simpleClone实现不适合深度克隆,因此如果您的User对象持有对其他对象的引用,则应将其转换为适当的克隆函数.