ngx-bootstrap typeahead 可观察答案

【问题标题】：ngx-bootstrap typeahead observablengx-bootstrap typeahead 可观察
【发布时间】：2017-07-03 09:17:02
【问题描述】：

所以我有一个如下所示的 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">

还有一个 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 发送了太多请求。关于如何解决这个问题的任何想法？

【问题讨论】：

我添加了这样的 catch 块this.segments = Observable.create((observer: any) => observer.next(this.segments)) .mergeMap((number: string) => this.suggestionsService.getSegmentSuggestions(this.editForm.get('segment').value)) .catch((error: any) => { return []; }); 这暂时解决了我的问题，但我确信有比这更好的解决方案。
我也遇到了同样的问题，你解决了吗？
@Simon 我在上面的评论中解决了它，至少在我找到更优雅的解决方案之前它一直在工作。但尚未找到更优雅的解决方案。
你看过新的 Angular HttpClient 中的拦截器了吗？
@ksimonson10 既然你提到了它，我已经看过了，但是你在想什么版本的 Angular HttpClient？我在某处读到（4.3 版）我不能只将拦截器应用于某些请求而不是全局，这就是我需要的。

标签： angular typescript angular2-observables ngx-bootstrap

【解决方案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));

【讨论】：

【解决方案2】：

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

您可以使用 [typeaheadWaitMs]="500"，它会在用户输入 500 毫秒后调用 api 调用。就像 debounce 一样。

【讨论】：

这对我不起作用。当输入长度为 1 时，它仍然向建议服务发送请求。