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

Question

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

我的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

你可能只是短路：

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

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

Answer 2

您只需将一个filter运算符添加到Observable即可。

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);
      }
  });
}

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