如何解决Angular:在取消的请求中搜索快速结果
我有一个列表的搜索框,可以在文本输入时向服务器发出 HTTP 请求。
<input type="text" [ngModel]="searchText" (ngModelChange)="searchTextChange.next($event)">
这是我在我的组件文件中处理它的方式:
public searchTextChange = new Subject<string>();
this.searchTextChange.pipe(debounceTime(500)).subscribe((text: string) => {
let params = new HttpParams();
params = params.set('search',text);
this.apiService.getList(params).subscribe((res) => {
//..do something
});
});
我面临的问题是快速搜索。当我快速输入文本时,HTTP 请求被取消。我尝试将 debounceTime 设为 500 毫秒,但这没有帮助。
解决方法
您可以使用 concatMap
rxjs 运算符。
要了解其工作原理,请参阅此 RxJS Marbles site
您需要做的就是按照以下方式链接您的请求
this.searchTextChange.pipe(concatMap(searchQuery => {
let params = new HttpParams();
params.set('search',searchQuery)
return this.apiService.getResults(params);
})
.subscribe(results => console.log(results))
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。