避免在 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$
}

解决方法

您所做的是多次创建可观察对象作为用户输入。 您应该创建一个像 filterThrottle = new Subject<string>(); 这样的主题，然后像

一样在 ngOnInit 中订阅它

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

在 html 中像这样发出

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