Angular6 ngModelChange 中的去抖动时间

Posted

技术标签:

【中文标题】Angular6 ngModelChange 中的去抖动时间【英文标题】:Debouncetime in Angular6 ngModelChange 【发布时间】:2019-01-17 16:28:55 【问题描述】:

我有一个用 Angular6 编写的复杂计算器应用程序,它根据 ngModelChange 事件中的几个输入计算结果,并直接在图表中显示这些结果。计算在服务器端完成。现在我想添加一个去抖动时间,这样服务器就不会在每次按下按键时都收到请求。

我在 ngModelChange 中触发的计算方法如下所示:

async calculate()
 if(this.checkInputs())
   try
     let returnDto = await this.webApiService.calculate(new CalculatorInputDto(this.model)).toPromise();
     this.outputCalculate.emit(returnDto);
   
   catch(e)
     console.log(e);
   

还有我的服务方式:

calculate(dto: CalculatorInputDto): Observable<any> 
 let url = this.baseUrl + "calculate";
 return this.http.post(url, JSON.stringify(dto), this.options)
    .pipe(
        debounceTime(5000),
        map((res => res.json())),
        catchError(error => this.handleError(error))
     );

如您所见,我已经在我的服务中尝试了 debounceTime(5000),但似乎没有任何改变。

有人知道我该如何解决这个问题吗?

【问题讨论】:

您需要在您的keypress 订阅中使用debounceTime,这里没有 检查这个:***.com/questions/50275945/… 【参考方案1】:

我现在借助这个问题解决了这个问题:debounceTime & distinctUntilChanged in angular 6

所以我为每个输入创建了一个 Viewchild 并将它们放在一个数组中。在 ngAfterViewInit 中我调用了这个方法:

setInputEvent() 
 let inputArray = this.fillViewChildsInArray();
 for (let element of inputArray) 
    this.input$ = fromEvent(element.nativeElement, 'input')
    .pipe(
       debounceTime(1000),
       map((e: KeyboardEvent) => e.target['value'])
     );
     this.input$.subscribe((val: string) => 
      this.calculate();
     );
   

【讨论】:

【参考方案2】:

您始终可以使用Subjects 来实现此功能,如下所示:

声明一个主题:

customInput : Subject&lt;string&gt; = new Subject();

在您的模板中:

(ngModelChange)='inputValueChanged($event)'

所以现在听事件:

  inputValueChanged(event)
      this.customInput.next(event);
  

您必须通过以下方式订阅您的主题:

this.customInput.debounceTime(300).distinctUntilChanged().subscribe(value =>
       //value will have your input
    );

(有了这个,你的代码会看起来整洁、有条理)

编辑:使用 rxjs >= v6,

完整的例子可以在here找到

import  Subject  from 'rxjs';
import  debounceTime, distinctUntilChanged from 'rxjs/operators';


this.customInput.pipe(debounceTime(300),distinctUntilChanged()).subscribe(value =>
 //value will have your input
);

【讨论】:

以上是关于Angular6 ngModelChange 中的去抖动时间的主要内容,如果未能解决你的问题,请参考以下文章

Angular 2 ngModelChange 旧值

为啥在下拉列表中加载组件时不会触发 ngmodelChange 事件?

ngModelChange 如何在 ngModel 指令中不提供模型名称的情况下工作

离子切换(ngModelChange)打印错误的输出

ng6中ngModelChange如何获取change前ngModel绑定的值

使用 formControlName 和 ngModel 的角度 6 警告