2017-02-10 7 views
7

में बाध्यकारी डेटा मैं निम्नलिखित एचटीएमएलएक तरह से Angular2

<app-grid [columns]="columns" [data]="data" ></app-grid> 

मैं डेटा और स्तंभों गुण अपरिवर्तनीय होना चाहता हूँ मिल गया। ग्रिड केवल इसे दिखाना चाहिए। लेकिन डेटा को सॉर्ट या फ़िल्टर करने के मामलों में कम से कम ऑर्डर बदल जाएगा।

लेकिन मेरी समस्या यहां है। यदि मैं डेटा सरणी तक पहुंचता हूं और किसी ऑब्जेक्ट की एक प्रॉपर्टी को संशोधित करता हूं। इस प्रकार सं.

this.data[0].name = "test" 

मूल बदल जाता है। लेकिन मैंने सोचा [डेटा] डेटा एकमात्र तरीका है।

क्या कोई मुझे सही दिशा में इंगित कर सकता है, यह क्यों हो रहा है और मैं इसे कैसे छोड़ सकता हूं। मैं प्रतिक्रिया से आया हूं जहां यह बहुत सीधे आगे होगा।

+0

यदि आप चाहते हैं 'डेटा' निश्चित रूप से अपरिवर्तनीय होना करने के लिए आपको इसे इस तरह संशोधित नहीं करना चाहिए?बाल घटक में आपको प्रासंगिक संशोधनों के साथ 'डेटा' की एक नई सरणी बनाना चाहिए। –

+0

लेकिन मैंने सोचा कि यह एक तरह से डेटा बाध्यकारी बिंदु था। कि नीचे दिया गया डेटा नीचे घटक से संशोधित नहीं किया जा सकता है। प्रतिक्रिया में की तरह। या क्या मैं कुछ न कुछ भूल रहा हूं? – Daniel

+0

आपको समझना होगा कि बाध्यकारी का क्या मतलब है। बाध्यकारी का मतलब है कि कुछ चीजों को बांधना। तो कोई फर्क नहीं पड़ता कि एक तरफा बाध्यकारी, दो-तरफा बाध्यकारी, वे सभी बाध्यकारी हैं, इसका मतलब है कि कुछ चीज़ से कुछ बांधना चाहिए। एक तरफा मतलब है कि बाध्यकारी एक दिशा है (देखने के लिए मॉडल)। दो-तरफा मतलब है कि बाध्यकारी दो दिशा है (मॉडल को देखने और देखने के लिए मॉडल)। –

उत्तर

10

आप सही हैं, वाक्यविन्यास [target]=expression एक तरह से डेटा बाध्यकारी है, लेकिन मुझे लगता है कि आपने डेटा बाध्यकारी के एक तरीके के विचार को गलत समझा है।

डेटा स्रोत से दृश्य लक्ष्य से बाध्यकारी एक तरीका डेटा का अर्थ है कि दृश्य से मूल्य घटक पर वापस नहीं भेजे जाते हैं, जबकि घटक में अभिव्यक्ति में किए गए कोई भी परिवर्तन दृश्य में परिलक्षित होते हैं - यह एक तरीका डेटा है डेटा स्रोत से देखने के लिए बाध्यकारी, इसका मतलब यह नहीं है कि यह एक बार डेटा बाध्यकारी एक तरीका है।

दूसरी ओर आपको सिंटैक्स (target)=expression के साथ व्यू लक्ष्य से डेटा स्रोत पर बाध्यकारी डेटा मिल सकता है जिसका उपयोग घटकों को ईवेंट को पास करने के लिए किया जाता है।

आप यहां दस्तावेज़ों में कोणीय 2 डेटा बाध्यकारी के बारे में अधिक जानकारी प्राप्त कर सकते हैं: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax

8
  • अगर आप का उपयोग [ngModel], [value], {{ param }} आदि आप एक तरह से बाध्यकारी, देखने के लिए मॉडल,
  • अगर आप का उपयोग (ngModelChange) आप एक तरह से बाध्यकारी, मॉडल के लिए दृश्य है,
  • यदि आपके पास [(ngModel)] का उपयोग करें आपके पास दो तरह के बाध्यकारी हैं।

लेकिन आप इनपुट @Input() संपत्ति के साथ एक उप-घटक का उपयोग कर रहे हैं और इस लाइन ;-) अंकन नहीं है से बाहर नृत्य यह कैसा है क्योंकि यह हमेशा आबद्ध है लग रहा है।

<sub-component [prop]="myObj"></sub-component> 

इसलिए यदि आप अपने उप-घटक में myObj बदलने के लिए, यह आबद्ध किया जाएगा:

ngOnInit() { 
    this.myObj = this.myObj.push(this.newObj); 
} 

आप बंधन को रोकने के लिए myObj की स्थानीय प्रतिलिपि के साथ काम कर सकता है। कोणीय आधिकारिक दस्तावेज से

<sub-component [prop]="myObj" (update)="myObj = $event"></sub-component> 
4

:

आप मॉडल से एक अद्यतन की जरूरत है आप इसे @Output() साथ घटना के रूप में धक्का कर सकते हैं

enter image description here