Question

我是Angular5的新用户，并搜索了几个小时，但无法解决我的问题。 SO上的每个相关线程与我的版本都不相同。

我有一个输入，当在该输入中键入内容时，我想在该输入上触发功能。

这是我的输入内容：

<input
   #autocompleteInput
   class="inputHeader"
   (click)="openSearch()"
   placeholder="Coupe homme, lissage brésilen, ..."
/>

这是我的输入属性声明：

@Input() autocompleteInput: string;

当我在ngOnInit（）方法中console.log(this.autocompleteInput);时，它显示“未定义”。

我在做什么错了？

任何帮助都将受到欢迎。

Answer 1

Input属性用于组件交互。在这里，如果要获取在输入中输入的值，则可以使用

在html中

 <input
       #autocompleteInput
       class="inputHeader"
       (click)="openSearch()"
       placeholder="Coupe homme, lissage brésilen, ..."
       (input)="inputData($event.target.value)"
    />

在ts：

inputData(data: any) {
 console.log(data)
}

Answer 2

您应该对同一事件使用“ keyup”事件：

<input
   #autocompleteInput
   class="inputHeader"
   (click)="openSearch()"
   placeholder="Coupe homme, lissage brésilen, ..."
   (keyup)="methodName($event)"

/>

Answer 3

autocompleteInput是对input元素的引用，而不是输入内容。您必须将其与ViewChild装饰器一起使用才能获得ElementRef：

@ViewChild('autocompleteInput') inputRef: ElementRef;

通过此ElementRef，您可以使用inputRef.nativeElement获取本机元素（HTMLInputElement）。

但是，如果要获取在输入中键入的文本，则应使用input事件：

<input
   #autocompleteInput
   type="text"
   class="inputHeader"
   (input)="onInput($event.target.value)"
   placeholder="Coupe homme, lissage brésilen, ..."
/>

onInput(value: string) {
  // do something with value
}

或使用ngModel来控制输入的值：

<input
   #autocompleteInput
   type="text"
   class="inputHeader"
   [ngModel]="value"
   (ngModelChange)="valueChanged($event)"
   placeholder="Coupe homme, lissage brésilen, ..."
/>

value: string;

valueChanged(value: string) {
  this.value = value;
  // do something with this.value
}

请参见this Stackblitz demo

如果使用的是Ionic，则应使用<ion-input>而不是<input>：

<ion-input type="text" (input)="onInput($event.target.value)"></ion-input>

Answer 4

在ts文件中

import {ViewChild} from '@angular/core';

export class tsClass implements OnInit  {
@ViewChild('autocompleteInput') autocompleteInput;
//now you can user it
this.autocompleteInput = this.autocompleteInput.nativeElement;
}

Answer 5

结果是，模板的底部还有另一个输入，当单击第一个输入时使用该输入。输入事件现在触发良好。

抱歉，我很愚蠢，感谢大家的时间和耐心。

角5-为什么我的输入属性未定义？

5 个答案: