在 Angular2 中修改 Observable 会导致 BehaviorSubject 触发答案

【问题标题】：Modifying Observable in Angular2 Causes BehaviorSubject to Fire在 Angular2 中修改 Observable 会导致 BehaviorSubject 触发
【发布时间】：2017-04-23 22:11:58
【问题描述】：

在下面的 plunk 中，当您单击 Select Market 时，Observable 会填充一组数据。第一项以黄色突出显示，因为它的属性设置为选中。当焦点位于输入框时，您可以在列表中向下箭头。问题是 BehaviorSubject 每次都在触发并从服务器获取数据列表。如何在每次不触发 searchTerms BehaviorSubject 的情况下修改选定的属性？ market-search.component.ts 文件中的方法 searchInputArrowKeyPressed 是处理箭头键的地方。

public searchInputArrowKeyPressed(event): void {
    this.markets = this.markets
        .map((markets: Market[]) => {
            for(let market of markets) {
                if(market.selected) {
                    if(event === 'down' && markets.indexOf(market) < markets.length) {
                        markets[markets.indexOf(market) + 1].selected = true;
                    }
                    if(event === 'up' && markets.indexOf(market) > 0) {
                        markets[markets.indexOf(market) - 1].selected = true;
                    }
                    market.selected = false;
                    return markets;
                }
            }
        });
}

https://plnkr.co/edit/TBYb5QBau9Vmz8PqQpCl?p=preview

提前感谢您的任何帮助！

【问题讨论】：

可能不相关，但是你用新的 observable 重新分配市场似乎很奇怪
@n00dl3 有没有办法修改 Observable 的内容？
不，你不能，对不起...
我已经为你的问题加了星标，以后有时间我会尽力帮忙的，不过我现在有点忙……

标签： angular observable rxjs5 behaviorsubject

【解决方案1】：

我同意@n00dl3，重新分配流看起来不自然。我已经修改了您的 plunker，以便每个事件（数据、搜索、向上/向下和输入）都有自己的流。例如：

public searchInputArrowKeyPressed(event): void {
    this.upDownEvents.next(event);
}

数据的修改是通过在数据流中推送更新的数组来完成的。

    this.upDownEvents
      .withLatestFrom(this.markets)
      .subscribe(([event, markets]) => {
          for(let market of markets) {
              if(market.selected) {
                  // change selected

                  this.markets.next(markets);
                  return;
              }
          }
      });

请看here

【讨论】：