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-引導預輸入可觀察的

回答

相關問題