Modifying Observable in Angular2 Causes BehaviorSubject to Fire

Question

In the following plunk when you click on the Select Market an Observable is populated with an array of data. The first item is highlighted in yellow because it has a property set to selected. When focus is on the input box you can arrow down in the list. The problem is the BehaviorSubject is firing and grabbing the list of data from the server each time. How can I modify the selected property without searchTerms BehaviorSubject firing each time? the method searchInputArrowKeyPressed in the market-search.component.ts file is where the arrow keys are being handled.

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

Thank you in advance for any and all help!

Answer 1

I agree with @n00dl3, reassigning the stream looks unnatural. I've modified your plunker so that every event (data, search, up/down and enter) has it's own stream. E.g.:

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

Modification to the data is done through pushing updated array in data stream.

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

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

Please, look here