角度2 #ID及び要素は

Question

レンダリングされていない場合、私は三つの入力を持つフォームを有する：次いで3秒後に、三つの入力がレンダリングされていない開始時

<div> 
<input *ngIf = "showInputs" #input1 (change)="onTfChnage(input2)" type="text"/> 
<input *ngIf = "showInputs" #input2 (change)="onTfChnage(input3)" type="text"/> 
<input *ngIf = "showInputs" #input3 type="text"/> 
</div> 

（*ngIf条件falseで使用）IレンダリングするにはshowInputsをtrueに変更してください。入力の変更イベントが発生した場合、私はundefinednextInputのパラメータ

showInputs = false; 
constructor(){ 
    setTimeout(()=>{ 
     this.showInputs = true; 
    },3000); 
} 
onTfChnage(nextInput){ 
    console.log(nextInput) // got undefined here 
} 

Answer 1

あなたの問題は、* ngIf可能性があります：メソッドでevent.target.valueため

<div> 
<input *ngIf = "showInputs" #input1 (change)="onTfChnage($event)" type="text"/> 
<input *ngIf = "showInputs" #input2 (change)="onTfChnage($event)" type="text"/> 
<input *ngIf = "showInputs" #input3 type="text"/> 
</div> 

ルック：あなたは必要であれば、あなたのセレクタと、より正確な/手の込んだ得ることができる、とはいえ、これは最も単純な形式でありますもう一度参照したいかもしれないフォームに値を隠しているときは、* ngHideに変更する必要があります。 * ngIfを使用すると、DOMから何かが隠されることはありませんが、実際には削除されます。したがって、参照しようとすると未定義になります。

https://docs.angularjs.org/api/ng/directive/ngHide

Answer 2

使用$イベント、

<input #input1 (change)="onTfChnage($event)" type="text"/> 

か、変数

input1 :ElementRef ; 
input2:ElementRef; 


    <input #input1 (change)="onTfChnage(input2)" type="text"/> 
<input #input2 (change)="onTfChnage(input1)" type="text"/> 

LIVE DEMO

を宣言する必要がありますを取得します

Answer 3

$ eventまたは$ event.targetを渡し、jsを使用して次の要素を取得します。

showInputs = false; 
constructor(){ 
    setTimeout(()=>{ 
     this.showInputs = true; 
    },3000); 
} 
onTfChnage(event){ 
    console.log(event.target.nextElementSibling.value) // next elements value 
}