コンストラクター内に次のコードがあります。
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でない場合にのみ、オブザーバブルを起動させるにはどうすればよいですか?
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([])
});
最も簡単には、filter()
演算子を使用して、空のterm
sをすべて除外します。
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
}));