typescript 如何仅在项不为null/empty的情况下执行Observable？

zzlelutf 于 2023-02-17 发布在 TypeScript

关注(0)|答案(4)|浏览(125)

在构造函数中有以下代码：

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时才触发observable？

typescript

来源：https://stackoverflow.com/questions/42334602/how-to-only-execute-an-observable-if-term-is-not-null-empty

4条答案

按热度按时间

icnyk63a1#

最简单的方法是使用filter()操作符过滤掉所有空的term：

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

赞(0）回复(0）举报 2023-02-17

eufgjt7s2#

如果您希望避免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([]) 
  });

赞(0）回复(0）举报 2023-02-17

64jmpszr3#

在Rxjs 6中，更新为使用pipe，您可以停止处理可观察对象，这样就不会使用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
      )
    )
);

赞(0）回复(0）举报 2023-02-17

ukxgm1gy4#

请注意......如果您疯狂地认为null仍然通过过滤器，那么请确保它实际上不是像'null'这样的字符串。

赞(0）回复(0）举报 2023-02-17