Nhân bản đối tượng TypeScript

Question

Tôi đang làm việc với Angular 2 với TypeScript. Tôi có thành phần Quản lý người dùng, nơi tôi có bảng toàn bộ người dùng.

Khi bất kỳ người dùng nào trong bảng được nhấp vào thì biểu mẫu sẽ phù hợp với toàn bộ thuộc tính của anh ấy để chỉnh sửa. Chọn người dùng xảy ra sự kiện như sau:

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

Vấn đề là khi được chọnNgười dùng đang được chỉnh sửa thuộc tính của mình cũng thay đổi trong bảng và trông không đẹp. Tôi đã cố gắng tạo bản sao cho bản thân mình như dưới đây nhưng nó không giúp được - lớp người dùng

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

Có lẽ tôi đang làm điều gì đó không tốt trong Angular2?

Answer 1

Hãy thử sử dụng

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

Như đã đề cập bởi @AngularFrance, điều này sẽ chỉ làm việc cho các đối tượng nông-sao chép, tìm kiếm thi khác nếu có một nhu cầu sâu sao chép một đối tượng.

Answer 2

Bạn có thể liên kết biểu mẫu trình chỉnh sửa của mình với đối tượng người dùng trống, nói editUser, thay vì biến số selectedUser (trỏ đến phần tử trong bộ sưu tập người dùng của bạn). Trong số onUserSelected(event), bạn sẽ khởi tạo editUser bằng cách sao chép các thuộc tính có thể thay đổi của các đối tượng người dùng đã chọn. Khi gửi biểu mẫu chỉnh sửa ((ngSubmit)="editSubmit()"), bạn thay thế các thuộc tính ban đầu trong đối tượng người dùng đã chọn trong bộ sưu tập người dùng.

cái gì đó dọc theo dòng:

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); 
} 

Việc thực hiện simpleClone là không thích hợp cho nhân bản sâu sắc, vì vậy nếu đối tượng người dùng của bạn giữ tham chiếu đến các đối tượng khác, điều này sẽ được biến thành một chức năng nhân bản thích hợp.

Answer 3

Bạn có thể sử dụng lodash:

https://lodash.com/docs#cloneDeep

lodash được khuyến khích cho rất nhiều đối tượng/thao tác mảng