Question

如果我在组件中使用ngx-typeahead指令，如下所示

<input type="search"
  [(ngModel)]="asyncSelected"
  [typeahead]="dataSource"
  (typeaheadLoading)="changeTypeaheadLoading($event)"
  (typeaheadNoResults)="changeTypeaheadNoResults($event)"
  (typeaheadOnSelect)="typeaheadOnSelect($event)"
  [typeaheadWaitMs]="200"
  [typeaheadMinLength]="2"
  [typeaheadOptionsInScrollableView]="10"
  [typeaheadSingleWords]="false"
  [typeaheadScrollable]="true"
  [typeaheadItemTemplate]="someTemplate"
/>

在组件的构造函数中启动dataSource：

this.dataSource = Observable.create((observer: any) => {
    observer.next(this.asyncSelected);
}).mergeMap((token: string) => {
    return this.http.post<DevisResponses>('http://example.com/api',token);
});

当我在<input/>写一些字母后，请求A 将在 200Ms 之后，但如果我＆＃39 ;然后在通话结束前快速输入另一个字母然后我会有一个新的请求B ，结果与请求A ！

似乎[typeaheadWaitMs]是唯一可用于阻止请求的参数，但是我可以中止之前发出的和未完成的请求吗？

Answer 1

因此，当@Daniel B和@Alexander Poshtaruk在评论中指出时，我必须导入swithMap运算符并使用它而不是mergeMap，因为，如{{1}中所述3}}：

当发出新的内部Observable时，switchMap会停止从先前发出的内部Observable中发出项目，并开始从新的Observable中发出项目。

所以在import { switchMap } from 'rxjs/operators';之后，我现在就dataSource启动{<1}}：

this.dataSource = Observable.create((observer: any) => {
    observer.next(this.asyncSelected);
}).mergeMap((token: string) => {
    return this.http.post<DevisResponses>('http://example.com/api',token);
});

但是，我仍然不明白为什么我不能使用.switchMap作为创建的Observable的方法（如the doc示例中所述）

中止先前请求异步ngx-typeahead

1 个答案: