title: Angular 4 - reference to 'this' in observable subscription appears to refer to old data
body: <p>I have an <code>EditItems</code> component that's use for editing <code>items</code>. Inside the <code>ngOnInit()</code>, I subscribe to an observable that's in my <code>dataService</code> (a central Angular service for handling all of my data calls).</p>
  
  <p>When the observable's data changes, my <code>subscribe</code> method is invoked:</p>
  
  <pre><code>ngOnInit() {
        this.myItemsSubscription = this.dataService.myItemsChanged
        .subscribe(
          (items: any[]) =&gt; {
            let lastItem = items[items.length - 1];
  
            if(lastItem.label.trim() === this.itemsForm.controls.label.value.trim()){
              this.id = lastItem.id;
  
              // *reference to 'this.editMode' below is always 'false'
              if (this.editMode){
                // do something
              }
            }
          }
        )
  }
  </code></pre>
  
  <p>It appears that within the <code>subscribe</code> routine above, any references to properties within the current component are referring to the state of the component <em>before</em> the change that altered the observable.</p>
  
  <p>For example I'm setting the value of <code>this.editMode</code> later on in <code>ngOnInit</code>, so that it's set to 'true' if a route with an id parameter is detected, however in the <code>.subscribe</code> above, it's still false (there's definitely nothing else that could be setting this back to false). I've verified that <code>this</code> is definitely referencing my component. If I reference <code>this.editMode</code> <em>outside</em> of the subscription to <code>this.dataService.myItemsChanged</code>, I get the correct value of <code>true</code>.</p>
  
  <pre><code>      this.route.params.subscribe((params: Params) =&gt; {
            this.editMode = false;
  
            if (Number(params['id']))
            {
              this.editMode = true;
            }
            this.initForm();
           }
        );
  }
  </code></pre>
  
  <p>So, when I navigate to the route for an item, for an existing 'item', the above subscription is triggered, and <code>this.editMode</code> is set to <code>true</code> temporarily, but it's <code>false</code> when 'this.editMode' is referenced inside the first <code>subscribe</code></p>
  
  <h2><strong>Update</strong></h2>
  
  <p>Properties of <code>this</code> are only referring to 'old' values when I create a new item (new items are also created with the 'EditItems' component), and <em>then</em> navigate to a different route, then navigate back to my item (with the 'id' on the route, so that <code>this.route.params.subscribe</code> is triggered)</p>
  
  <p>Here are the relevant parts of my <code>DataService</code>.  I'm declaring the <code>myItemsChanged</code> Subject as my Observable. <code>myItemsChanged</code> gets altered by a separate subscription that listens to a SignalR broadcast from the back end when the items are changed (the <code>itemUpdated</code> event)</p>
  
  <pre><code>@Injectable()
  export class DataService {
  
    myItemsChanged = new Subject&lt;any[]&gt;();
  
    //Listening for the 'itemUpdated' event broadcast by SignalR from the back end
    let onItemUpdated$ = new BroadcastEventListener&lt;any&gt;('itemUpdated');
  
    this.connection.listen(onItemUpdated$);
    onItemUpdated$.subscribe((item: any) =&gt; {
      let index = this.items.findIndex(x =&gt; x.id === item.id);
      if (index &gt; -1) {
        this.myItemsChanged.next(this.items.slice());
      }
    });
  </code></pre>
  
  <p>Why am I seeing <code>false</code> for the value of <code>this.editMode</code> inside the first subscription?</p>