Angular 2：Debounce（ngModelChange）？

有沒有辦法來消除模板指令(ngModelChange)？Angular 2：Debounce（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()

來源

2016-12-23 mtyson

分享你的代碼，你有ngModelChange做什麼？ – Milad

https://angular.io/docs/ts/latest/tutorial/toh-pt6.html#!#search-by-name可能是這個鏈接會幫助你 – Devansh

要麼使用Devansh的建議，如果你的意圖是反彈一個'Observable'。否則，你可以爲'onFieldChange（）'寫一個封裝器方法，它將消除它並在'ngModelChange（）'中調用。 – naeramarth7

如果你想添加debounceTime同時做HTTP調用，您可以使用Subject這是非常容易使用。這也在angular2 tutorial - HTTP中解釋。

來源

2016-12-24 15:37:55 Devansh

如果您不想使用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); 
    } 
}

來源

2017-10-13 12:14:05

Angular 2：Debounce（ngModelChange）？

回答

相關問題