Angular2, * ngIf und lokale Template-Variablen

Question

Könnte jemand bitte erklären, was hinter folgendem Verhalten ist:

Sagen wir eine Angular2 Komponente haben, die ein _model Objekt hat. Dann in der Vorlage haben wir diese

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

Die _model verfügbar ist von Anfang an von Grund auf in ngOnInit geschaffen. Das Eingabefeld wird mit dem _model.firstName Variable und der Leitung richtig bestückt

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

korrekt die folgend in der Vorlage

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

So weit so gut. Was ich verwirrt ist, dass der Moment, als ich eine * ngIf und ich das Eingabefeld

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

Die doppelte geschweifte Klammer Interpolation nicht mehr funktioniert, weil offenbar das lokale myInput Variable nicht initialisiert wird erhalten, selbst wenn nichts anderes im Code zu ändern

Änderungen, das _model-Objekt wird noch in onNgInit() erstellt und das Eingabefeld funktioniert noch ordnungsgemäß. Das einzige, was die {{myInput?.className}} macht, ist

Class:

Kann jemand erklären, was los ist und/oder mich für diese auf die richtige Stück Dokumentation zeigen?

Vielen Dank im Voraus!

Edit:

Hier ist ein Plunker, die das Problem in Frage zeigt

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

Erstellt Bugreport https://github.com/angular/angular/issues/8087

Answer 1

wir einen lokalen Template-Variable auf dem gleiche Elemente verweisen können, auf einem Geschwisterelement oder auf allen untergeordneten Elementen. - ref

* ngIf wird/zu

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

So lokalen Template-Variable #myInput nur innerhalb des Schablonenblock (das heißt, Geschwister und/oder untergeordneten Elemente) verwiesen erweitert werden kann.Daher würden Sie einen beliebigen HTML setzen müssen, die die lokale Template-Variable in der Vorlage referenzieren will:

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

Plunker

---

Wenn Sie etwas außerhalb des Schablonenblock auf die im Zusammenhang zeigen müssen Eingang, verwenden @ViewChildren('myInput') list:QueryList<ElementRef> und dann auf Änderungen abonnieren:

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

mehr Que ansehen ryList Methoden in der API doc.