如果术语不为空/空，如何仅执行 Observable？

Posted 2023-03-13

【中文标题】如果术语不为空/空，如何仅执行 Observable？

【英文标题】：How to only execute an Observable if term is not null/empty?

【发布时间】：2017-07-09 03:27:58

【问题描述】：

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

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 的值不为空/null 时，我怎样才能让我的 observable 触发？

【问题讨论】：

构造函数中可以有if条件

不就是简单地检查一下你的服务吗？

@developer033 - 我的服务是直接可观察的。我现在用方法对问题进行编辑。

【参考方案1】：

在更新为使用pipe 的 Rxjs 6 中，您可以停止处理 observable，因此不会使用 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
      )
    )
);

【参考方案2】：

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

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

【讨论】：

无缝运行。虽然它会留下this.searchResults 的问题，这是当term 为空时API 服务最后返回的结果的值。如果搜索词为空，this.searchResults 怎么可能设置为 null 或 undefined？

你的 this.searchResults 持有 Observable，所以你可能不想覆盖它。

filter 保存了我的日期。

使用过滤器为.filter(term => term != null)

真的应该是这个答案

【参考方案3】：

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

【讨论】：

整洁。但不幸的是，当term 为空/null 时，searchResults 不会被清空。

好吧，在这种情况下，如果没有匹配项，您应该返回 API 将返回的任何内容。例如，要返回一个空数组，请将Observable.empty() 替换为Observable.of([])。