Question

我的构造函数中包含以下代码：

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

这是我的输入

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

您可以看到我按照教程获取代码here。

我的API服务方法如下：

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

每次在我的输入中更改searchTerm时，都会触发API调用。我的问题是，即使我的输入为空（例如输入查询，然后将其全部退回），也会触发调用。

我的问题是，当`searchTerm的值不为空/空时，我怎么才能触发我的observable？

Answer 1

最简单的方法是使用Object运算符过滤掉所有空的filter()：

term

Answer 2

如果您想避免API调用并希望在搜索词为空时重置搜索结果，请在switchMap中测试一个空字符串，并在该情况下返回一个空的observable：

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([]) 
  });

Answer 3

在已更新为使用pipe的Rxjs 6中，您可以停止可观察对象的处理，因此不会使用EMPTY向下游传播任何内容：

this.searchResults = this.searchTerm.valueChanges
    .pipe(
      debounceTime(500)
      distinctUntilChanged()
      switchMap(term => 
        (term) 
          // If the term exists make a request
          ? this.apiService.search({ limit: this.searchResultsLimit, term: term })
          // Otherwise, stop all processing
          : EMPTY
      )
    )
);

如果term不为null / empty，如何只执行Observable？

3 个答案: