Angular2、* ngIfとローカルテンプレート変数

Question

誰かが次の行動の背後に何があるかを説明してもらえ：

たちは_modelオブジェクトを持つAngular2コンポーネントを持っていると言います。その後、我々はこの

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

を持っているテンプレートに_modelはngOnInitでゼロから作成され、最初から使用可能です。入力フィールドが正しく正しくテンプレート

Class: form-control ng-untouched ng-pristine ng-invalidに以下レンダリング_model.firstName変数とライン

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

が移入されています。

これまでのところとても良いです。どのような私を混乱することは瞬間、私は* ngIf追加することであり、私は明らかにローカルmyInput変数は、コード内で他の場合でも、何も初期化されていないされませんので、二重の中括弧の補間が動作しなく

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

に入力フィールドを変更します変更された場合、_modelオブジェクトはまだonNgInit()に作成され、入力フィールドはまだ正常に動作しています。 {{myInput?.className}}がレンダリングする唯一のものは

Class:

で誰かが何が起こっているかを説明し、および/またはそのための文書の正しい片に私を指すことができますか？

ありがとうございます！

編集：

はここで質問

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

私たちは、同じ要素上のローカルテンプレート変数を参照することができhttps://github.com/angular/angular/issues/8087

Answer 1

作成されたバグレポートの問題を示してplunkerです、兄弟要素、または任意の子要素に適用できます。 - 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) 
    ) 
} 

もっと見るryListメソッドはAPI docにあります。