changeイベントは、入力のフォーカスが変更された後にのみ呼び出されます。キーを押すたびにイベントが発生するようにするにはどうすればよいですか？

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

2番目のバインディングは、キーを押すたびに変わります。

私はイベント入力を使用しただけで、次のように正常に機能しました。

.htmlファイル内：

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

.tsファイル内：

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

構文を2つの部分（プロパティデータバインディングとイベントバインディング）にngModelChange分割して使用し[(x)]ます。

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

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

バックスペースキーにも使用できます。

（キーアップ）イベントが最善の策です。

その理由を見てみましょう：

1. （変更）あなたが述べたように、入力がフォーカスを失ったときにのみトリガーをトリガーするため、用途は限られています。
2. （キープレス）キーを押すとトリガーされますが、バックスペースのような特定のキーストロークではトリガーされません。
3. （keydown）キーが押されるたびにトリガーされます。したがって、常に1文字遅れます。キーストロークが登録される前の要素の状態を取得するため。
4. （キーアップ）は、キープッシュイベントが完了するたびにトリガーされるので、最新のキャラクターも含まれます。

それで、（キーアップ）は一緒に行くのが最も安全です...

• （変更）イベントとは異なり、キーストロークごとにイベントを登録します
• （keypress）が無視するキーを含む
• （keydown）イベントとは異なり、遅延はありません

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

そのようなケースを処理する別の方法は、formControlを使用valueChangesしてコンポーネントを初期化するときにサブスクライブすることです。これにより、httpリクエストの実行などの高度な要件にrxjsオペレーターを使用でき、ユーザーが文を書き終えるまでデバウンスを適用し、最後の値を取得しますそして、前を省略します...

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)="unitsChanged[i] = true" (change)="unitsChanged[i] = true"

最初のテストでは、これが正常に機能することを示し、さらなるテストの後にバグが見つかった場合はポストバックします。