角2：デバウンス（ngModelChange）？

Question

テンプレートディレクティブ(ngModelChange)をデバウンスする方法はありますか？

または、それとは別のやり方をとる最も苦痛な方法は何ですか？

私が見る最も近い答えはこうです：だからHow to watch for form changes in Angular 2?

、例えば、私は、テキスト入力を持って、私はのonChange更新情報を取得したいが、私はすべてのキーストロークからそれをデバウンスしたい：

<input type="text" class="form-control" placeholder="Enter a value" name="foo" [(ngModel)]="input.event.value" (ngModelChange)="onFieldChange($event, input)"> 

デバウンスonFieldChange()

Answer 1

あなたは、httpをしている間、あなたは非常に使いやすいですSubjectを使用することができます呼び出すdebounceTimeを追加したい場合。これは、角2 tutorial - HTTPで説明されています。

Answer 2

formcontrolアプローチを使用したくない場合は、ここでキーストロークをデバウンスするのに苦労しない方法です。

search.component.html

<input type="text" placeholder="Enter a value" name="foo" [(ngModel)]="txtQuery" (ngModelChange)="onFieldChange($event)"> 

search.component.ts

export class SearchComponent { 

     txtQuery: string; // bind this to input with ngModel 
     txtQueryChanged: Subject<string> = new Subject<string>(); 

     constructor() { 
      this.txtQueryChanged 
      .debounceTime(1000) // wait 1 sec after the last event before emitting last event 
      .distinctUntilChanged() // only emit if value is different from previous value 
      .subscribe(model => { 
       this.txtQuery = model; 

       // Call your function which calls API or do anything you would like do after a lag of 1 sec 
       this.getDataFromAPI(this.txtQuery); 
      }); 
     } 

    onFieldChange(query:string){ 
     this.txtQueryChanged.next(query); 
    } 
}