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<string> = 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 中的去抖动时间的主要内容,如果未能解决你的问题,请参考以下文章
为啥在下拉列表中加载组件时不会触发 ngmodelChange 事件?
ngModelChange 如何在 ngModel 指令中不提供模型名称的情况下工作