title: Subscribing to Observable not triggering change detection
body: <p>I am using 'angular2-virtual-scroll' to implement load on demand. The items used to be driven by observable's using the async pipe triggered by the parent component. Now i am trying to call my service from the child. The call is successful and i get my data, i need to use the subscribe event to apply other logic. The issue is change detected does not appear to be working when i update my arrays in the subscribe function. I have read other similar issues but i have had no luck finding a solution. </p>
  
  <p>This is the main component where the service calls are used. The inital request is done from the onInit. And then when you scroll down fetchMore is called.</p>
  
  <pre><code>import { Component, OnInit, Input, OnDestroy  } from '@angular/core';
  import { Store } from '@ngrx/store';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/observable/of';
  import { User } from './../models/user';
  import { Role } from './../../roles/models/role';
  import { UsersService } from './../services/users.service';
  import { ChangeEvent } from 'angular2-virtual-scroll';
  import { promise } from 'selenium-webdriver';
  import { VirtualScrollComponent } from 'angular2-virtual-scroll';
  import { Subscription } from 'rxjs/Subscription';
  
  @Component({
    selector: 'app-users-list',
    template: `
      &lt;div class="status"&gt;
          Showing &lt;span class=""&gt;{{indices?.start + 1}}&lt;/span&gt;
          - &lt;span class=""&gt;{{indices?.end}}&lt;/span&gt;
          of &lt;span class=""&gt;{{users?.length}}&lt;/span&gt;
          &lt;span&gt;({{scrollItems?.length}} nodes)&lt;/span&gt;
      &lt;/div&gt;
      &lt;virtual-scroll [childHeight]="75" [items]="users" (update)="scrollItems = $event" (end)="fetchMore($event)"&gt;
          &lt;div #container&gt;
              &lt;app-user-info *ngFor="let user of scrollItems" [roles]="roles" [user]="user"&gt;
                &lt;li&gt;
                  &lt;a [routerLink]="['/users/edit/', user.id]" class="btn btn-action btn-edit"&gt;Edit&lt;/a&gt;
                &lt;/li&gt;
              &lt;/app-user-info&gt;
              &lt;div *ngIf="loading" class="loader"&gt;Loading...&lt;/div&gt;
          &lt;/div&gt;
      &lt;/virtual-scroll&gt;
    `
  })
  export class UsersListComponent implements OnInit, OnDestroy {
    users: User[] = [];
    @Input() roles: Role[];
    currentPage: number;
    scrollItems: User[];
    indices: ChangeEvent;
    readonly bufferSize: number = 20;
    loading: boolean;
    userServiceSub: Subscription;
  
    constructor(private usersService: UsersService) {
    }
  
    ngOnInit() {
      this.reset();
    }
  
    ngOnDestroy() {
        if(this.userServiceSub) {
            this.userServiceSub.unsubscribe();
        }
    }
  
    reset() {
      this.loading=true;
      this.currentPage = 1;
      this.userServiceSub = this.usersService.getUsers(this.currentPage).subscribe(users =&gt; {
          this.users = users;
      });
    }
  
    fetchMore(event: ChangeEvent) {
      if (event.end !== this.users.length) return;
      this.loading=true;
      this.currentPage += 1;
      this.userServiceSub = this.usersService.getUsers(this.currentPage).subscribe(users =&gt; {
          this.users = this.users.concat(users);
      });
    }
  }
  </code></pre>
  
  <p>From what i have read this could be a context issue but i am not sure. Any suggestions would be great.</p>
  
  <p>"EDIT"</p>
  
  <p>Looking at the source code for the plugin component i can see where the change event is captured.</p>
  
  <pre><code>VirtualScrollComponent.prototype.ngOnChanges = function (changes) {
      this.previousStart = undefined;
      this.previousEnd = undefined;
      var items = changes.items || {};
      if (changes.items != undefined &amp;&amp; items.previousValue == undefined || (items.previousValue != undefined &amp;&amp; items.previousValue.length === 0)) {
          this.startupLoop = true;
      }
      this.refresh();
  };
  </code></pre>
  
  <p>If i put a breakpoint in this event it fires on the initial load, so when we instantiate the array to []. It fires when i click on the page. But it does not fire when the array is update in the subscribe event. I have even put a button in that sets the array to empty, and that updates the view so the subscribe function must be breaking the change detection.</p>