Angular2, * ngIf и локальные переменные шаблона

Может кто-нибудь объяснить, что из-за следующего поведения:

Скажем, у нас есть компонент 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.

Пока все хорошо. Меня смущает то, что в момент добавления * ngIf и я меняю поле ввода на

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

Интерполяция двойных фигурных скобок перестает работать, потому что, по-видимому, локальная переменная myInput не инициализируется, даже когда ничего не изменяется в коде, объект _model все еще создается в onNgInit(), и поле ввода все еще работает правильно, Единственное, что делает {{myInput?.className}} -

Class:

Может кто-нибудь объяснить, что происходит и/или указать мне на правильную часть документации для этого?

Спасибо заранее!

Edit:

Здесь плункер, который показывает проблему, о которой идет речь

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

Создан отчет об ошибке https://github.com/angular/angular/issues/8087

Ответ 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)
   )
}

Дополнительные методы QueryList в API doc.