Angular Bootstrap Typeahead循环引用问题：RxJS SwitchMap无法处理求方案

我懂你现在遇到的困境——用Angular Bootstrap Typeahead展示颜色数据时，需要解析带循环引用的JSON结果，之前直接订阅API请求的场景下能正常用resolveJsonReferences处理，但在结合RxJS SwitchMap的Typeahead实现里，不知道怎么把解析逻辑无缝集成进去。

其实解决起来很简单，你只需要在SwitchMap的数据流中，用RxJS的map操作符专门处理JSON循环引用的解析即可，这样处理后的数据就能顺利传递给Typeahead组件。下面是调整后的具体实现：

方案一：使用工具类的解析方法 #

search = (text$: Observable<string>) => text$
  .debounceTime(200)
  .distinctUntilChanged()
  .do(() => {
    this.searching = true;
    this.searchFailed = false; // 提前重置失败状态，避免状态混乱
  })
  .switchMap(term => 
    this.colorService.searchColors(term)
      // 在这里对API返回的原始结果执行循环引用解析
      .map(res => this.utilities.resolveJsonReferences(res))
      .catch(() => {
        this.searchFailed = true;
        return Observable.of([]);
      })
  )
  .do(() => this.searching = false);

方案二：使用全局挂载的解析方法 #

如果你的解析方法是挂在window对象上的，也可以直接这样调用：

search = (text$: Observable<string>) => text$
  .debounceTime(200)
  .distinctUntilChanged()
  .do(() => {
    this.searching = true;
    this.searchFailed = false;
  })
  .switchMap(term => 
    this.colorService.searchColors(term)
      .map(res => (<any>window).resolveJsonReferences(res))
      .catch(() => {
        this.searchFailed = true;
        return Observable.of([]);
      })
  )
  .do(() => this.searching = false);

逻辑说明 #

SwitchMap的核心作用是将输入的文本流转换成API请求的结果流，在这个转换过程中，map操作符可以对API返回的原始数据做同步转换——也就是执行你的循环引用解析逻辑，转换后的干净数据会继续在数据流中传递，最终被Typeahead组件接收使用。

另外我把searchFailed的重置逻辑放到了第一个do操作符里，这样每次触发新搜索时都会先清空之前的错误状态，避免旧状态干扰当前搜索的显示效果。

内容的提问来源于stack exchange，提问作者Developer