Клонирование объектов TypeScript

Question

Я работаю с Angular 2 с TypeScript. У меня есть компонент управления пользователями, где у меня есть таблица для всех пользователей.

При нажатии любого пользователя в таблице формы обрабатываются всеми его свойствами для редактирования. Выбор пользователя происходит событие, как показано ниже:

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

Вы можете привязать форму редактора к пустому объекту пользователя, например 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 не подходит для глубокого клонирования, поэтому, если ваши объекты пользователя хранить ссылки на другие объекты, то это должно быть превращено в соответствующую функцию клонирования.

Answer 3

Вы можете использовать lodash:

https://lodash.com/docs#cloneDeep

lodash рекомендуется для многих объектов/манипуляции массива