Question

我有一个包含三个输入的表单：

<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，然后在3秒后我将showInputs更改为true以渲染它们。触发输入更改事件后，undefined参数

获得nextInput

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

Answer 1

使用$ event，

 <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 2

传入$ event或$ event.target并使用js获取下一个元素。如果需要，您可以使用选择器获得更好/更准确，但这是最简单的形式：

<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>

在方法中查找event.target.value：

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

Answer 3

您的问题可能是* ngIf，当您将值隐藏在您可能想要再次引用的表单上时，您应该更改为* ngHide。使用* ngIf不会隐藏DOM中的内容，它实际上会删除它。因此，如果您尝试引用它，您将得到未定义。

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

Angular 2 #id和未呈现元素的时间

3 个答案: