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

Question

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

कहते हैं कि हम एक Angular2 घटक एक _model वस्तु है कि है। तब खाके में हम इस

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

_model उपलब्ध है जो शुरू से ngOnInit में खरोंच से बनाया जा रहा है। इनपुट क्षेत्र ठीक से _model.firstName चर और लाइन

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

साथ आबादी वाले सही ढंग से टेम्पलेट

Class: form-control ng-untouched ng-pristine ng-invalid में निम्नलिखित renders है।

अभी तक इतना अच्छा है। क्या मुझे confuses उस पल मैं जोड़ने * ngIf है और मैं

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

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

Class:

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

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

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

यहाँ एक plunker कि प्रश्न

http://plnkr.co/edit/itNRpy5lc9PB837C7HdP?p=preview

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

Answer 1

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

* ngIf/

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

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

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

और देखें Que API doc में ryList तरीकों।