2017-01-28 4 views
5

मैं टाइपस्क्रिप्ट के साथ कोणीय 2 के साथ काम कर रहा हूं। मेरे पास उपयोगकर्ता प्रबंधन घटक है जहां मेरे पास पूरे उपयोगकर्ताओं की तालिका है।क्लोनिंग ऑब्जेक्ट्स टाइपस्क्रिप्ट

जब तालिका में कोई भी उपयोगकर्ता क्लिक किया जाता है तो उसके संपूर्ण गुणों को संपादित करने के लिए अपील करता है। उपयोगकर्ता का चयन के रूप में नीचे घटना होती है:

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

समस्या है जब selectedUser उसके गुण संपादित किया जा रहा भी तालिका में बदल जाता है और यह बहुत अच्छा नहीं लगती है। शायद मैं जो कुछ अच्छा अभ्यास Angular2 में नहीं है कर रहा हूँ उपयोगकर्ता वर्ग

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

- मैं अपने आप को नीचे के रूप में नकल बनाने की कोशिश की, लेकिन यह मदद नहीं की?

+0

क्या समस्या यह है कि आप का सामना कर रहे – Aravind

+0

पर stackoverflow http कुछ पहले से ही उठाया सवाल का प्रयास है://stackoverflow.com/questions/28150967/typescript-cloning-object –

उत्तर

13

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

@AngularFrance ने उल्लेख किया का उपयोग करके देखें, यह केवल, उथले नकल वस्तुओं के लिए काम करेंगे अगर वहाँ एक वस्तु गहरे कॉपी करने के लिए एक की जरूरत है एक और कार्यान्वयन की तलाश है।

+1

साइड नोट: 'Object.assign()' उथले प्रतियों (गहरी प्रतियां नहीं) के लिए है, जो इस प्रश्न के मामले में काम करना चाहिए। – AngularChef

+0

आप सही हैं, संपादित करें। – Amit

+5

गहरी प्रतियों के लिए, हमेशा विवादास्पद 'obj = JSON.parse (JSON.stringify (o)) होता है;' – AngularChef

4

आप एक खाली उपयोगकर्ता ऑब्जेक्ट के लिए अपने संपादक प्रपत्र बाँध सकता है, selectedUser चर के बजाय editUser कहते हैं, (जो आपके उपयोगकर्ता संग्रह का एक तत्व को इंगित करता है)। आपके 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 कार्यान्वयन इसलिए यदि आपके उपयोगकर्ता वस्तुओं अन्य वस्तुओं के लिए संदर्भ पकड़, यह एक उचित क्लोनिंग समारोह में बदल दिया जाना चाहिए गहरी क्लोनिंग के लिए उपयुक्त नहीं है,।

5

आप lodash उपयोग कर सकते हैं:/सरणी जोड़तोड़

https://lodash.com/docs#cloneDeep

lodash वस्तुओं की बहुत के लिए सिफारिश की है

संबंधित मुद्दे