<input type="text" (keypress)="myMethod(myInput.value)" #myInput />

归档.ts

myMethod(value:string){
...
...
}

(按键)项目是你最好的选择。

让我们来看看原因:

(变化)就像你提到的，只有当输入失去焦点时才会触发，因此用处有限。 (按键)在按键时触发，但在某些按键(如退格键)时不触发。 (keydown)每次按下键时触发。因此总是滞后1个字符;因为它获得了注册击键之前的元素状态。 (keyup)是你最好的选择，因为它会在每次按键推送事件完成时触发，因此这也包括最近的字符。

所以(keyup)是最安全的，因为它…

与(change)事件不同，在每次击键时都注册一个事件 包括(按键)忽略的键 没有延迟不像(keydown)事件

你要找的是

<input type="text" [(ngModel)]="mymodel" (keyup)="valuechange()" />
{{mymodel}}

然后通过访问绑定this对数据做任何你想做的事情。我的模型在你的。ts文件。

<input type="text" [ngModel]="mymodel" (keypress)="mymodel=$event.target.value"/>
{{mymodel}}

更新

https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event

警告:由于此事件已弃用，您应该使用beforeinput或keydown代替。

对于响应式表单，您可以订阅对所有字段或仅对特定字段所做的更改。

获取一个FormGroup的所有更改:

this.orderForm.valueChanges.subscribe(value => {
    console.dir(value);
});

获取特定字段的更改:

this.orderForm.get('orderPriority').valueChanges.subscribe(value => {
    console.log(value);
  });

我只是使用事件输入，它工作得很好如下:

在.html文件中:

<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">

在.ts文件中:

onSearchChange(searchValue: string): void {  
  console.log(searchValue);
}