NGX-bootstrap typeahead observable

Question

J'ai donc un champ d'entrée typeahead qui ressemble à ceci:

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

Et un Observable qui me aide les suggestions typeahead.

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

Mon problème est que le Observable envoie une demande, même quand mon entrée longueur de la valeur du champ est inférieure à 3, même si je l'ai mis typeaheadMinLength="3". Cela se produit lorsque l'utilisateur saisit une valeur, puis supprime rapidement certains caractères (plus rapidement que mon temps d'anti-rebond), puis essaie d'entrer une nouvelle valeur. Mon API pour les suggestions échoue quand il reçoit une valeur d'entrée avec une longueur inférieure à 3, puis mon application se casse et je dois actualiser la page pour la faire fonctionner à nouveau. J'ai essayé d'établir le temps de debounce à 0 et je n'ai pas eu ce problème alors, mais c'est une mauvaise pratique et il envoie trop de demandes à mon API. Des idées sur la façon de résoudre cela?

Answer 1

Il devrait être [typeaheadMinLength]="3" instead of typeaheadMinLength="3". Lorsque vous l'attribuez comme typeaheadMinLength="3", il devient une attribution de chaîne.

Vous pouvez utiliser [typeaheadWaitMs]="500", il appellera api appel après 500 MS d'entrée utilisateur. Qui est comme se comporte comme le rebond.