Angular 2： Debounce(ngModelChange)

发布于10月13日

有没有办法消除模板指令(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)">

go 盎司onFieldChange()

推荐答案

EDIT

在Angular的新版本中，您可以使用ngModelOption中的updateOn来设置'blur'.Link to angular.io documentation

代码示例:

<input [(ngModel)]="value"
  [ngModelOptions]="{ updateOn: 'blur' }"
  (ngModelChange)="updateOnlyOnBlur($event)">

LEGACY个

如果您不想使用formcontrol方法，这里有一种不那么痛苦的解除击键的方法.

搜索组成部分html

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

搜索组成部分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);
    }
}