修改Angular2中的可观测性使BehaviorSubject着火

Question

在下面的按钮中，当您单击Select时，一个可观察的数据被填充到一个数据数组中。第一项以黄色高亮显示，因为它有一个属性设置为selected。当焦点放在输入框上时，您可以在列表中向下箭头。问题是，BehaviorSubject每次都会从服务器上触发和获取数据列表。如何在每次不触发searchTerms BehaviorSubject的情况下修改所选属性？市场中的searchInputArrowKeyPressed方法-search.Component.ts文件是处理箭头键的地方。

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

提前感谢您的帮助！

Answer 1

我同意@n00dl3，重新分配流看起来不自然。我修改了您的柱塞，使每个事件(数据、搜索、上下和输入)都有自己的流。例如：

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

拜托，看这里