NGX-Bootstrap-typeahead beobachtbaren

Question

So habe ich ein ein typeahead Eingabefeld, das wie folgt aussieht:

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

Und ein beobachtbares, die ich die Vorschläge in typeahead erhalten hilft.

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

Mein Problem ist, dass die beobachtbare eine Anforderung sendet, auch wenn meine Eingabefeld Wertlänge kleiner ist als 3, auch wenn ich typeaheadMinLength="3" gesetzt haben. Dies geschieht, wenn ein Benutzer einen Wert eingibt und dann einige der Zeichen schnell löscht (schneller als meine Entprellzeit) und dann versucht, einen neuen Wert einzugeben. Meine API für Vorschläge schlägt fehl, wenn ein Eingabewert mit einer Länge von weniger als 3 empfangen wird. Dann bricht meine Anwendung ab und ich muss die Seite aktualisieren, damit sie wieder funktioniert. Ich habe versucht, Entprellzeit auf 0 zu setzen, und ich hatte dieses Problem dann nicht, aber das ist eine schlechte Praxis und es sendet zu viele Anfragen an meine API. Irgendwelche Ideen, wie man das löst?

Answer 1

Es sollte [typeaheadMinLength]="3" instead of typeaheadMinLength="3" sein. Wenn Sie es wie typeaheadMinLength="3" zuweisen, wird es eine Zeichenfolge-Zuweisung.

Sie können [typeaheadWaitMs]="500" verwenden, wird es API-Aufruf nach 500 MS Benutzereingabe aufrufen. Was sich wie ein Debounce verhält.