web-dev-qa-db-ja.com

項がnullまたは空でない場合にのみObservableを実行する方法は?

コンストラクター内に次のコードがあります。

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

そして、これは私の入力です

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

コード ここ を取得するために私が従ったチュートリアルを見ることができます。

私のAPIサービスメソッドは次のとおりです。

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

入力内でsearchTermが変更されるたびに、API呼び出しが発生します。私の問題は、入力が空の場合でも(クエリを入力してからすべて後退させるなど)でも呼び出しが発生することです。

私の質問は、 `searchTermの値が空/ nullでない場合にのみ、オブザーバブルを起動させるにはどうすればよいですか?

10
Fizzix

API呼び出しを回避し、検索用語が空のときに検索結果をリセットする場合は、switchMapで空の文字列をテストし、その状況で空の監視対象を返します。

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

最も簡単には、filter()演算子を使用して、空のtermsをすべて除外します。

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