NGX-引导预输入可观察的

所以我有一个看起来像这样的一个预输入输入字段：NGX-引导预输入可观察的

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

而且可观察到的，这有助于我获得预输入的建议。

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

我的问题是可观察到的发送请求，即使我的输入字段值长度小于3，即使我已经设置typeaheadMinLength="3"。这发生在用户键入一个值然后快速删除一些字符（比我的去抖时间更快），然后尝试输入一个新值。我的API建议失败，当它收到长度小于3的输入值，然后我的应用程序中断，我不得不刷新页面，使其再次工作。我试图设置去抖时间为0，然后我没有这个问题，但这是一个不好的做法，它发送了太多的请求到我的API。有关如何解决这个问题的任何想法？

来源

2017-07-03 banana

我添加了这样的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）=> { }）;' 这解决了我现在的问题，但我确定有比这更好的解决方案。 – banana

我有这个完全相同的问题，你有没有想到它？ – Simon

@Simon我在上面的评论中解决了它，至少在我找到更优雅的解决方案之前，它至少在工作。但更优雅的解决方案尚未找到。 – banana

它应该是[typeaheadMinLength]="3" instead of typeaheadMinLength="3"。当您像typeaheadMinLength="3"那样分配它时，它变成一个字符串分配。

您可以使用[typeaheadWaitMs]="500"，它会在用户输入500 MS后调用API调用。这就像反弹一样。

来源

2017-12-23 13:21:57 sunder

这不适合我。当输入长度为1时，它仍向requestsService发送请求。 – banana

NGX-引导预输入可观察的

回答

相关问题