当检查值是否为空时，我得到。你提供了 "未定义 "的流的地方预期

Question

我监控用户的键盘，以便从一个API中返回建议。我使用了一个反应式表单，我用这个方法检查输入值。

  private getQuery() {
    return this.playerForm.get('playerInput').valueChanges.pipe(debounceTime(200));
  }

通过这个实现，我不断地将当前的输入查询发送到后台，后台返回结果。我为这个逻辑使用了switchMap。

  private getAutoSuggestions() {
    this.subs.sink = this.getQuery().pipe(
      switchMap(query => {
        if (query !== null) { 
          return this.store.getPlayers(query);
        }
      })
    ).subscribe((backendList: Player[]) => {
      this.playersList = backendList;
    });
  }

这个逻辑工作得很好，但是我需要做一个额外的检查，因为它发送了一些空值，可能是因为RxJS的异步调用。当我添加(if query !== null)时，我得到了错误。

TypeError: 你提供了'undefined'，而在这里你需要的是一个流。你可以提供一个Observable、Promise、Array或Iterable。在 subscribeTo (subscribeTo.js:40)

Answer 1

A switchMap() 总是希望得到一个Observable的回报，当你在这里的时候，你不会返回任何东西 query 是空的。这就是为什么出错的原因。

如果你得到 null 那么你需要处理它。也许通过返回相同的 playerList 或一个空的列表，取决于你的要求。

private getAutoSuggestions() {
    this.subs.sink = this.getQuery().pipe(
    switchMap(query => {
        if (query !== null) { 
            return this.store.getPlayers(query);
        } else {
            return of([...this.playersList]) // or return of([]) 
        }
    })
    ).subscribe((backendList: Player[]) => {
        this.playersList = backendList;
    });
}