用語が空白の場合はリアルタイム検索を無効にする - 角2

Question

thisチュートリアルを使用してリアルタイム検索を作成しましたが、クエリで空の検索を送信するとエンドポイントがリダイレクトされます。キーアップが空白の場合、どうすれば機能を無効にできますか？

私のhtmlでkeyUpイベント：

<input(keyup)="searchTerm$.next($event.target.value)"> 

コンポーネント：

this.searchService.search(this.searchTerm$) 
.subscribe(results => { 
    this.results = results 
}); 

検索サービス：

constructor(private http: Http) { } 

search(terms: Observable<string>) { 
return terms.debounceTime(400) 
    .distinctUntilChanged() 
    .switchMap(term => this.searchEntries(term)); 
} 

searchEntries(term) { 
return this.http 
    .get(this.baseUrl + this.queryUrl + term) 
    .map(res => res.json()); 
} 

Answer 1

あなただけの短絡可能性：

<input (keyup)="$event.target.value && searchTerm$.next($event.target.value)"> 

を「値がある場合は、検索を実行します」

Answer 2

あなただけObserableへfilterオペレータを追加することができます。

return terms.debounceTime(400) 
    .distinctUntilChanged() 
    .filter(term => this.term) 
    .switchMap(term => this.searchEntries(term)); 
} 

ホワイトスペースが問題になる可能性があるので、あなたがthis.term && this.term.trim().length > 0のような表現を持つフィルタはもう少し具体的になるかもしれません。実装はあなた次第です。

Answer 3

return terms.debounceTime(400) 
    .distinctUntilChanged() 
    .switchMap(term => this.searchEntries(term)); 
} 

無効にするケースを確認できます。だからこのように変更する：

return terms.debounceTime(400) 
    .distinctUntilChanged() 
    .switchMap(term => { 
     if(term){ 
     this.searchEntries(term); 
     } 
    }); 
} 

もっと洗練された解決法があるかもしれませんが、それはうまくいくはずです。