angular - * ngIf y variables de plantilla local

interpolation

Question

¿Podría alguien explicarme qué hay detrás del siguiente comportamiento?

Digamos que tenemos un componente Angular 2 que tiene un objeto _model . Luego en la plantilla tenemos esto:

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

_model está disponible desde el principio y se crea desde cero en ngOnInit() . El campo de entrada se rellena correctamente con la variable _model.firstName y la línea:

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

representa correctamente lo siguiente en la plantilla:

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

Hasta aquí todo bien. Lo que me confunde es que en el momento en que agrego *ngIf y cambio el campo de entrada a

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

La interpolación de llaves dobles deja de funcionar porque aparentemente la variable local myInput no se inicializa incluso cuando no cambia nada en el código, el _model object todavía se crea en onNgInit() y el campo de entrada todavía funciona correctamente. Lo único que representa {{myInput?.className}} es

Class:

¿Alguien puede explicar lo que está sucediendo y / o indicarme la documentación correcta para esto?

EDITAR:

Aquí hay un Plunker que muestra el problema en cuestión.

Informe de error creado https://github.com/angular/angular/issues/8087

Answer 1

Podemos hacer referencia a una variable de plantilla local en el mismo elemento, en un elemento hermano o en cualquier elemento hijo. - ref

* ngIf se convierte / se expande a

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

Por lo tanto, la variable de plantilla local #myInput solo se puede referenciar dentro del bloque de plantilla (es decir, elementos hermanos y / o secundarios). Por lo tanto, tendría que poner cualquier HTML que quiera hacer referencia a la variable de plantilla local dentro de la plantilla:

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

Plunker

Si necesita mostrar algo fuera del bloque de plantilla relacionado con la entrada, use la lista @ViewChildren(''myInput'') list:QueryList<ElementRef> y luego suscríbase a los cambios:

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

Vea más métodos de QueryList en el documento de API .