angular - ngx-bootstrap typeahead 可观察

Question

所以我有一个预输入字段，看起来像这样:

<input formControlName="segment"
              [typeahead]="segments"
              (typeaheadLoading)="segmentsLoading($event)"
              (typeaheadNoResults)="segmentsNoResults($event)"
              (typeaheadOnSelect)="segmentOnSelect($event)"
              typeaheadOptionsLimit="10"
              typeaheadMinLength="3"
              typeaheadWaitMs="300"
              [typeaheadItemTemplate]="customSegmentTemplate"
              class="form-control">

还有一个 Observable，它可以帮助我提前输入建议。

this.segments = Observable.create((observer: any) => observer.next(this.segments))
  .mergeMap((number: string) => this.suggestionsService.getSegmentSuggestions(this.editForm.get('segment').value);

我的问题是，即使我设置了 typeaheadMinLength="3"，即使我的输入字段值长度小于 3，Observable 也会发送请求。当用户输入一个值然后快速删除一些字符(比我的去抖动时间快)然后尝试输入一个新值时，就会发生这种情况。我的建议 API 在收到长度小于 3 的输入值时失败，然后我的应用程序中断，我必须刷新页面才能使其再次运行。我尝试将去抖动时间设置为 0，然后我没有遇到这个问题，但这是一种不好的做法，它向我的 API 发送了太多请求。关于如何解决这个问题的任何想法？

Answer 1

这是一个解决方法的草图，在他们修复控件之前可能会有所帮助:

在您的可观察对象触发服务调用之前通过管道传递一个过滤器操作符:

this.segments = Observable.create((observer: any) => observer.next(this.segments))
    .pipe(filter(number => number.length >= YOUR_MIN_LENTH_LIMIT),
    .mergeMap((number: string) => this.suggestionsService.getSegmentSuggestions(this.editForm.get('segment').value));