时间戳

首页 > 解决方案 > 避免在 Angular 中的 keyup 事件中重复调用

angular - 避免在 Angular 中的 keyup 事件中重复调用

问题描述

我想做的是

  1. 调用服务并在 ngOnit() 上绑定数据
  2. 在给定的文本框中，当用户键入内容时，不是为每个字母调用 API 调用，而是等待一秒钟，如果用户没有进一步键入，则进行 API 调用（需要在用户笔画之间去抖动）。
  3. 搜索完成后，我想将该数据绑定回来。

问题：对于以下 API 调用，对于相同的搜索关键字进行了 3 到 4 次调用，我想进行 1 次调用，任何帮助将不胜感激，谢谢。

在我的 html 文件中

<div *ngIf=let result in result$ | async>
  
</div>
<input type="text" (keyup)="filterData($event)">

在我的组件文件中

ngOnInit(){

this.result$ =  someServiceCall(); //result$ is an observable
}

filterData(event)
{
  fromEvent(event.target, 'keyup')
  .pipe(debounceTime(1000), distinctUntilChanged(),
  mergeMap((search) => {
    this.result$ = someServiceCall(event.target.value)
    }))
observable.subscribe(value) => {
})
}
return this.result$
}

标签： angularrxjsangular-materialrxjs5rxjs-observables

解决方案

您所做的是多次创建 observable 作为用户输入。您应该创建一个主题，filterThrottle = new Subject<string>();然后在 ngOnInit 中订阅它

this.filterThrottle.pipe(debounceTime(1000)).subscribe((input) => {
 // Do something with input
});

在 html 中像这样发出

<input type="text" (keyup)="filterThrottle.next($event)">

推荐阅读