Angular2, * ngIf e dei modelli locale variabili

Question

Qualcuno potrebbe spiegare cosa c'è dietro il seguente comportamento:

Dire che abbiamo un componente Angular2 che ha un oggetto _model. Poi nel modello abbiamo questa

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

Il _model è disponibile a partire dall'inizio di essere creato da zero in ngOnInit. Il campo di immissione è correttamente popolato con la variabile _model.firstName e la linea

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

rende correttamente il seguente nel modello

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

Fin qui tutto bene. Ciò che mi confonde è che il momento aggiungo * ngIf e modificare il campo di input per

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

La doppia parentesi graffe interpolazione smette di funzionare perché a quanto pare la variabile locale myInput non viene inizializzato anche quando nient'altro nel codice modifiche, l'oggetto _model viene ancora creato in onNgInit() e il campo di input funziona ancora correttamente. L'unica cosa che la rende {{myInput?.className}} è

Class:

Qualcuno può spiegare cosa sta succedendo e/o indicarlo al corretto pezzo di documentazione per questo?

Grazie in anticipo!

Edit:

Ecco un plunker che mostra il problema in questione

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

bug report Creato https://github.com/angular/angular/issues/8087

Answer 1

Siamo in grado di fare riferimento a una variabile di modello locale sullo stesso elemento, su un elemento di pari livello o su qualsiasi elemento figlio. - ref

* ngIf diventa/espande a

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

variabile di modello così locale #myInput può essere fatto riferimento solo all'interno del blocco di template (vale a dire, fratello e/o elementi figlio).Quindi si avrebbe dovuto mettere qualsiasi HTML che vuole fare riferimento alla variabile di modello locale all'interno del template:

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

Plunker

---

Se avete bisogno di mostrare qualcosa al di fuori del blocco modello relativo al ingresso, utilizzare @ViewChildren('myInput') list:QueryList<ElementRef> e poi iscriversi a cambiamenti:

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

Tutte Que metodi ryList nel API doc.