仅在输入的焦点已更改后才调用change事件。如何使事件在每次按键上触发？

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

第二个绑定会在每次按键时改变。

我只使用了事件输入，它按如下所示工作正常：

在.html文件中：

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

在.ts文件中：

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

使用ngModelChange通过打破了[(x)]语法到它的两片，即财产数据绑定和事件绑定：

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

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

它也适用于退格键。

（keyup）事件是最好的选择。

让我们看看为什么：

1. （更改）就像您提到的那样，仅在输入失去焦点时才触发，因此用途有限。
2. （按键）会在触发，但不会在某些击键（如退格上触发。
3. （按键）每次按下键时触发。因此总是滞后1个字符；因为它在注册击键之前获得了元素状态。
4. （keyup）是您最好的选择，因为它在每次按键事件完成时都会触发，因此也包括最近的角色。

所以（keyup）是最安全的选择，因为它...

• 与（change）事件不同，在每个按键上注册一个事件
• 包括（keypress）忽略的键
• 与（keydown）事件不同，没有滞后

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

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

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);
      });
  }
}

使角ngModel保持同步的秘密事件是事件调用输入。因此，对您问题的最佳答案应该是：

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

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

存档.ts

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

您正在寻找的是

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

然后，通过访问this.mymodel.ts文件中的绑定，对数据进行任何所需的操作。

就我而言，解决方案是：

[ngModel]="X?.Y" (ngModelChange)="X.Y=$event"

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

获取FormGroup的所有更改：

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

获取特定字段的更改：

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

我一直在数字字段上使用keyup，但是今天我注意到在chrome中，输入具有向上/向下按钮以增加/减小keyup不能识别的值。

我的解决方案是使用keyup并一起更改：

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

初步测试表明它可以正常工作，如果在进一步测试后发现任何错误，则会回发。