web-dev-qa-db-ja.com

* ngIfおよびローカルテンプレート変数

誰かが次の動作の背後にあるものを説明してもらえますか？

_modelオブジェクトを持つAngular 2コンポーネントがあるとします。テンプレートにこれがあります：

<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 objectがonNgInit()と入力で作成されるため、動作を停止しますフィールドはまだ正常に機能しています。 {{myInput?.className}}がレンダリングする唯一のものは

Class:

誰かが何が起こっているのかを説明したり、これに関する正しいドキュメントを教えてくれたりしますか？

編集：

問題の問題を示す Plunker があります。

バグレポートの作成 https://github.com/angular/angular/issues/8087

angularinterpolation
15
RVP

同じ要素、兄弟要素、または任意の子要素でローカルテンプレート変数を参照できます。 - 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)
   )
}
_

API doc のその他のQueryListメソッドを参照してください。

33
Mark Rajcok