Question

所以我有一个类型为的输入字段：

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

还有一个Observable可以帮助我获得提前输入的建议。

typeaheadMinLength="3"

我的问题是，即使我已设置{{1}}，即使我的输入字段值长度小于3，Observable也会发送请求。当用户键入值然后快速删除某些字符（比我的去抖时间快）然后尝试输入新值时，就会发生这种情况。当我收到长度小于3的输入值然后我的应用程序中断并且我必须刷新页面以使其再次工作时，我的建议API失败。我试图将去抖时间设置为0，然后我没有遇到这个问题，但这是一个不好的做法，它向我的API发送了太多请求。关于如何解决这个问题的任何想法？

Answer 1

应该是[typeaheadMinLength]="3" instead of typeaheadMinLength="3"。当您将其分配为typeaheadMinLength="3"时，它将成为字符串赋值。

您可以使用[typeaheadWaitMs]="500"，它会在用户输入500 MS后调用api调用。这就像去抖动一样。

Answer 2

以下是可以解决的草图，直到他们修复控件之前，它可能会有所帮助：

在可观察者触发服务呼叫之前，请向过滤器操作员分配管道：

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

ngx-bootstrap typeahead observable

2 个答案: