你要找的是

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

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

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

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

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

它也适用于退格键。

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

让我们来看看原因:

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

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

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

我用下面的代码在Angular 11中解决了这个问题:

<input type="number" min="0" max="50" [value]="input.to" name="to"
        (input)="input.to=$event.target.value; experienceToAndFrom()">

并且，experienceToAndFrom()是我的组件中的一个方法。

PS:我尝试了以上所有的解决方案，但都不奏效。

你要找的是

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

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

处理这种情况的另一种方法是使用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);
      });
  }
}