web-dev-qa-db-fra.com

Comment exécuter un Observable uniquement si le terme n'est pas nul / vide?

J'ai le code suivant dans mon constructeur:

this.searchResults = this.searchTerm.valueChanges
    .debounceTime(500)
    .distinctUntilChanged()
    .switchMap(term => this.apiService.search({
        limit: this.searchResultsLimit,
        term: term
    }));

Et c'est mon entrée

<input type="text" [formControl]="searchTerm" />

Vous pouvez voir le tutoriel que j'ai suivi pour obtenir le code ici .

Ma méthode de service API est la suivante:

searchCompanies(options): Observable<any[]> {
    return this.jsonp.get('api/search', this.formatOptions(options)).map(res => {   
        return res.json();
    });
}

Chaque fois que searchTerm est modifié dans mon entrée, l'appel d'API est déclenché. Mon problème est que l'appel est déclenché même lorsque mon entrée est vide (par exemple, taper une requête, puis revenir en arrière).

Ma question est, comment puis-je faire en sorte que mon observable ne se déclenche que lorsque la valeur de `searchTerm n'est pas vide/nulle?

angulartypescriptrxjsobservablerxjs5
10
Fizzix

Si vous souhaitez éviter l'appel de l'API et que les résultats de la recherche soient réinitialisés lorsque le terme de recherche est vide, testez une chaîne vide dans switchMap et renvoyez un observable vide dans cette situation:

this.searchResults = this.searchTerm
  .valueChanges
  .debounceTime(500)
  .distinctUntilChanged()
  .switchMap(term => term ?
    this.apiService.search({
      limit: this.searchResultsLimit,
      term: term
    }) :
    // If search term is empty, return an empty array
    // or whatever the API's response for no matches
    // would be:
    Observable.of([]) 
  });
6
cartant

Le plus facilement, utilisez simplement l'opérateur filter() pour filtrer tous les terms vides:

this.searchResults = this.searchTerm.valueChanges
    .filter(term => term) // or even better with `filter(Boolean)`
    .debounceTime(500)
    .distinctUntilChanged()
    .switchMap(term => this.apiService.search({
        limit: this.searchResultsLimit,
        term: term
    }));
27
martin