Klonen von Objekten TypeScript

Question

Ich arbeite mit Angular 2 mit TypeScript. Ich habe eine Benutzerverwaltungskomponente, wo ich eine Tabelle für ganze Benutzer habe.

Wenn auf einen Benutzer in der Tabelle geklickt wird, werden Formulare mit allen Eigenschaften bearbeitet. Ereignis Benutzer die Wahl erfolgt wie folgt:

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

Das Problem ist, wenn selectedUser ändert sich auch seine Eigenschaften bearbeitet wird in der Tabelle und es tut so gut aussehen. Ich versuchte, mich zu erstellen zu kopieren, wie unten, aber es hat nicht geholfen - Benutzerklasse

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

Vielleicht ich etwas tue, die in Angular2 keine gute Praxis ist?

Answer 1

Try

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

Wie @AngularFrance erwähnt, dass dies nur für Flach Kopieren von Objekten wird mit arbeiten, sucht eine andere Implementierung, wenn ein Bedarf da ist, um ein Objekt tief zu kopieren.

Answer 2

Sie können Ihr Editorformular an ein leeres Benutzerobjekt binden, z. B. editUser, anstelle der selectedUser Variable (die auf ein Element Ihrer Benutzersammlung verweist). In Ihrem onUserSelected(event), würden Sie editUser durch Klonen der veränderbaren Eigenschaften der ausgewählten Benutzerobjekte initialisieren. Nach dem Senden des Bearbeitungsformulars ((ngSubmit)="editSubmit()") ersetzen Sie die ursprünglichen Eigenschaften im ausgewählten Benutzerobjekt in der Benutzersammlung.

Etwas entlang der Linien von:

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

Die simpleClone Implementierung ist für tiefes Klonen nicht geeignet, so dass, wenn Ihre Benutzerobjekte Verweise auf andere Objekte halten, soll dies in eine richtige Klonfunktion gedreht werden.

Answer 3

können Sie verwenden lodash:

https://lodash.com/docs#cloneDeep

lodash für viele Objekte empfohlen/array Manipulationen