Angular 2:去抖动(ngModelChange)?

新手上路,请多包涵

有没有办法去抖动模板指令 (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()

原文由 mtyson 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 513
2 个回答

编辑

在新版本的 Angular 中,您可以使用 updateOnngModelOption 中设置 'blur' 例如。 链接到 angular.io 文档

代码示例:

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

遗产

如果您不想使用 formcontrol 方法,这是消除击键的不那么痛苦的方法。

搜索.component.html

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

搜索.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);
    }
}

原文由 Sangram Nandkhile 发布,翻译遵循 CC BY-SA 4.0 许可协议

对于 RxJs 6+

所选答案不适用于 RxJs 6+。这是您必须更改的内容:

导入必须如下所示:

 import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';

您需要致电 pipe

 // ...
this.txtQueryChanged
   .pipe(debounceTime(1000), distinctUntilChanged())
   .subscribe(model => {
       this.txtQuery = model;
       // api call
   });
 // ...

查看 这篇文章 以进一步阅读。

原文由 Willi Mentzel 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题