Modification de Observable dans Angular2 Causes ComportementSubject to Fire

Question

Lorsque vous cliquez sur Select Market an Observable, le plunk suivant est rempli avec un tableau de données. Le premier élément est surligné en jaune car sa propriété est définie sur sélectionné. Lorsque la zone de saisie est active, vous pouvez faire défiler la liste vers le bas. Le problème est que BehaviorSubject déclenche et saisit la liste des données du serveur à chaque fois. Comment puis-je modifier la propriété sélectionnée sans rechercher searchTerms BehaviorSubject à chaque fois? la méthode searchInputArrowKeyPressed dans le fichier market-search.component.ts est l'endroit où les touches fléchées sont manipulées.

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

Nous vous remercions à l'avance pour toute aide!

Answer 1

Je suis d'accord avec @ n00dl3, réaffectant le flux semble non naturel. J'ai modifié votre plunker pour que chaque événement (données, recherche, haut/bas et entrée) ait son propre flux. E.g .:

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

La modification des données est effectuée en poussant la matrice mise à jour dans le flux de données.

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

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

S'il vous plaît, regardez here