ngx-bootstrap typeahead可观察

Question

因此，我有一个类似于下面的a typeahead输入字段：

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

还有一个观察值，它可以帮助我在typeahead中获得建议。

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

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

Answer 1

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

在您的observable触发服务调用之前，通过管道传递一个过滤器操作符：

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

Answer 2

应该是[typeaheadMinLength]="3" instead of typeaheadMinLength="3"。当你像typeaheadMinLength="3"一样给它赋值时，它就变成了一个字符串赋值。

您可以使用`typeaheadWaitMs=" 500 "`，它会在用户输入500ms后调用api调用。它的行为就像去反弹力。