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))

参考此stackblitz example