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

尝试使用

?someid=

如@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对象保存对其他对象的引用，则应将其转换为适当的克隆函数。

克隆对象TypeScript

3 个答案: