处理这种情况的另一种方法是使用formControl并在组件初始化时订阅它的valueChanges，这将允许您使用rxjs操作符来执行高级要求，如执行http请求，应用debounce直到用户写完一个句子，获取最后一个值并省略前一个值，等等。

import {Component, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'some-selector',
  template: `
    <input type="text" [formControl]="searchControl" placeholder="search">
  `
})
export class SomeComponent implements OnInit {
  private searchControl: FormControl;
  private debounce: number = 400;

  ngOnInit() {
    this.searchControl = new FormControl('');
    this.searchControl.valueChanges
      .pipe(debounceTime(this.debounce), distinctUntilChanged())
      .subscribe(query => {
        console.log(query);
      });
  }
}

<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代替。

通过将[(x)]语法分解成两部分来使用ngModelChange，即属性绑定和事件绑定:

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

valuechange(newValue) {
  mymodel = newValue;
  console.log(newValue)
}

它也适用于退格键。

我一直在使用keyup在一个数字字段，但今天我注意到在chrome的输入有上升/下降按钮来增加/减少的值，这是不被keyup识别。

我的解决方案是使用keyup和更改一起:

(keyup)="unitsChanged[i] = true" (change)="unitsChanged[i] = true"

初步测试表明，这工作良好，将在进一步测试后，如果发现任何错误。

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

归档.ts

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

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

在.html文件中:

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

在.ts文件中:

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