title: Angular service observable updating from within component
body: <p>I am an Angular newbie and am stuck on a problem.</p>
  
  <p>I have a problem where i have a BehaviourSubject defined within a singleton service which is being shared among 3 components. My app.ts component gets array data from an API call, then updates the BehaviourSubject using next() within the service.</p>
  
  <p>The issue i am having is that when i subscribe to the service within component A, copy the data to a local empty array and then push items into that array, Component B is seeing the items appended to the array within it's subscription to paymentdataservice.ts which i don't want (I only want the 'master list'). </p>
  
  <p>I'm obviously doing something wrong and perhaps have misunderstood the concept of observables so i'd greatly appreciate some help as this has me stumped!</p>
  
  <p>All functions are called from ngOnInit which i have excluded for code simplicity.</p>
  
  <p>PaymentDataService.ts:</p>
  
  <pre><code>@Injectable()
  
  constructor(private http: Http) { }
  
  private _paymentlistdata = new BehaviorSubject&lt;any&gt;([]);
  public readonly paymentlistdata = this._paymentlistdata.asObservable();
  
  //Function to get latest Paymethodlist data and input into subject
  updatePaymentListData(data) {
      this._paymentlistdata.next(data);       
  }
  
  //HTTP Call for PayMethods from API
  getPayMethods() {       
          let token = localStorage.getItem('token')   
          let headers = new Headers();
          headers.append('Content-Type', 'application/json');         
          return this.http.get('https://api.xyz.com/api/paymethods?
          token='+token+'', {headers: headers})
              .map((res: Response) =&gt; res.json())
  }
  </code></pre>
  
  <p><strong>App.ts</strong></p>
  
  <p>App.ts needs to get the Master Payment list and store it in the service for performance purposes, so it doesn't have to pull from the API in each component.</p>
  
  <pre><code>import { PaymentDataService } from '../app/services/paymentdata.service';
  
  constructor(private payservice : PaymentDataService) { }
  
  //Get payment data from PaymentDataService HTTP API
  getPaymentData() {
      this.payservice.getPayMethods().subscribe( 
      data =&gt; {
      if (data.Error === false) {
          this.payservice.updatePaymentListData(data); //update Behaviour 
          subject so other components can use the data locally        
      } else {
      this.router.navigate(["errorloading"]); 
      console.log (data);
      }   
  },
  error =&gt; {
      this.router.navigate(["errorloading"]);
      console.log (error);
  });
  </code></pre>
  
  <p><strong>Component A</strong> </p>
  
  <p>Component A needs to take the master payment list and append some additional options for a drop down menu. These options are only applicable in this component.</p>
  
  <pre><code>import { PaymentDataService } from '../app/services/paymentdata.service';
  
  constructor(private payservice : PaymentDataService) { }
  
  paymentlistdatalocal = [];
  
  //Populate paymentlist from service observable
  getPaymentListData() {
      this.paymentlistsubscription = this._payservice.paymentlistdata
      .subscribe(
      data =&gt; {
          this.paymentlistdatalocal = data.Paymethods;
          this.paymentlistdatalocal.push({paymethod_id:0, paymethod_name: 'No 
          payment method selected'});
      });
  }
  </code></pre>
  
  <p><strong>Component B</strong> </p>
  
  <p>Component B simply needs to list out the master payment list </p>
  
  <pre><code>import { PaymentDataService } from '../app/services/paymentdata.service';
  
  constructor(private payservice : PaymentDataService) { }
  
  paymentlistdatalocal = [];
  
  //Populate paymentlist from service observable
  getPaymentListData() {
      this.paymentlistsubscription = this._payservice.paymentlistdata
      .subscribe(
      data =&gt; {
          this.paymentlistdatalocal = data.Paymethods;
          console.log (data.Paymethods);
      });
  }
  </code></pre>
  
  <p>A console.log from Component B shows the items appended from Component A, assuming I initialise Component A first, otherwise it only contains the 'Master List' obtained from the initial API call.</p>