दिलचस्प पोस्ट
प्रतीकों को बदलने, अंग्रेजी वर्णमाला को एक्सेंट लेटर्स तर्कों के साथ एक फ़ंक्शन पर invoke-command -ScriptBlock का उपयोग करना मैं एक वेबसाइट में अप्रयुक्त छवियों और सीएसएस शैलियों कैसे पा सकता हूं? पहली बार होने वाली ऑटो इंचाल के साथ MySQL में डेटा INFILE को कैसे लोड करें? मुख्य धागा निकास, क्या अन्य बाहर निकलता है? क्षैतिज रूप से जारी रखने के लिए निश्चित-चौड़ाई DIV के अंदर फ़्लोटिंग डीआईवी कैसे प्राप्त करें? अन्य क्लास से कक्षा विधि कॉल करें चहचहाना पर कैरेक्टर उलटी गिनती इसे बनाने के बाद एक मोंगोज़ में उप-दस्तावेज़ को कैसे पॉप्युलेट करना है? क्या किसी भी अपवाद को कभी अनदेखा करने के लिए कोई वैध कारण है? कार्रवाई के लिए पुनर्निर्देशन और डेटा पास करने की आवश्यकता है सी का उपयोग कर URL को पार्स करने के सर्वोत्तम तरीके हैं? IPhone के लिए संकलित करते समय Xcode द्वारा #defines सेट किए गए हैं जावा इनर क्लास और स्टैटिक नेस्टेड क्लास मैं एसवीएन कमिट को कैसे वापस करूँ?

Angular2, * ngIf और स्थानीय टेम्पलेट चर

क्या कोई कृपया निम्नलिखित व्यवहार के पीछे क्या समझा सकता है:

कहते हैं कि हमारे पास एक Angular2 घटक है जिसमें एक _ मॉडल ऑब्जेक्ट है। फिर टेम्पलेट में हमारे पास यह है

<form> <input type="text" class="form-control" required [(ngModel)]="_model.firstName" ngControl="test2" #myInput > <br>Class: {{myInput?.className}} </form> 

_मॉडल एनजीओएनआईआईआईटी में खरोंच से बनाई गई शुरुआत से उपलब्ध है। इनपुट फील्ड ठीक से _model.firstName चर और लाइन के साथ पॉपुलेटेड है

<br>Class: {{myInput?.className}}

टेम्पलेट में सही ढंग से निम्नलिखित को प्रस्तुत करता है

Class: form-control ng-untouched ng-pristine ng-invalid

अब तक सब ठीक है। क्या मुझे भ्रमित करता है कि क्षण मैं * एनजीआईएफ जोड़ता हूं और मैं इनपुट फ़ील्ड को बदलता हूं

 <input *ngIf="_model" type="text" class="form-control" required [(ngModel)]="_model.firstName" ngControl="test2" #myInput > 

डबल घुंघराले ब्रेसिज़ प्रक्षेपण काम करना बंद हो जाता है क्योंकि जाहिरा तौर पर स्थानीय myInput वैरिएबल myInput नहीं होता है, जब भी कोड परिवर्तन में कुछ और नहीं होता है, _मॉडेल ऑब्जेक्ट अभी भी onNgInit() और इनपुट फ़ील्ड अभी भी ठीक से काम कर रहा है। केवल {{myInput?.className}} renders ही चीज़ है

Class:

क्या कोई ये समझा सकता है कि क्या हो रहा है और / या मुझे इस के लिए सही दस्तावेज के बारे में बताएगा?

अग्रिम में धन्यवाद!

संपादित करें:

यहां एक प्लंकर है जो प्रश्न में समस्या दिखाता है

निर्मित बग रिपोर्ट https://github.com/angular/angular/issues/8087

Solutions Collecting From Web of "Angular2, * ngIf और स्थानीय टेम्पलेट चर"

हम एक स्थानीय टेम्पलेट चर को उसी तत्व पर, एक भाई तत्व पर, या किसी भी बच्चे तत्वों पर संदर्भित कर सकते हैं। – रेफरी

* एनजीआईफ़ / के लिए फैलता है

 <template [ngIf]="_model"> <input type="text" class="form-control" required [(ngModel)]="_model.firstName" ngControl="test1" #myInput> </template> 

इसलिए स्थानीय टेम्पलेट चर #myInput को केवल टेम्पलेट ब्लॉक (यानी, भाई और / या बाल तत्वों) के भीतर संदर्भित किया जा सकता है। इसलिए आपको किसी भी एचटीएमएल को डाल देना होगा जो टेम्पलेट के अंदर स्थानीय टेम्पलेट चर को संदर्भित करना चाहता है:

 <template [ngIf]="_model"> <input type="text" class="form-control" required [(ngModel)]="_model.firstName" ngControl="test1" #myInput > <br>Class (this works): {{myInput?.className}} </template> 

Plunker


यदि आपको इनपुट से संबंधित टेम्पलेट ब्लॉक के बाहर कुछ दिखाए जाने की आवश्यकता है, तो @ViewChildren('myInput') list:QueryList<ElementRef> और फिर परिवर्तनों की सदस्यता लें:

 ngAfterViewInit() { this.list.changes.subscribe( newList => console.log('new list size:', newList.length) ) } 

एपीआई डॉक्टर में अधिक प्रश्न सूची तरीकों को देखें।