javascript - 如果术语为空，则禁用实时搜索 - Angular 2

Question

我使用本教程创建了一个实时搜索，但如果我在查询中发送空白搜索，我的终点会重定向。如果我的键盘为空白，如何禁用我的功能？

在我的 html 中键入：

<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

你可以filter在 Obserable 中添加一个操作符。

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

由于空格可能是一个问题，您可以使用类似this.term && this.term.trim().length > 0. 实施取决于您。

Answer 2

你可以短路：

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

“如果有值，则运行搜索”

Answer 3

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

您可以检查您希望禁用的情况。所以你会像这样改变它：

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

可能有一个更优雅的解决方案，但这应该可行。