Angular 2 Change Detection delayed several seconds with Arrays and @Inputs

Question

I know there is a ton of information on change detection in Angular 2 and I've been doing my best to wrap my head around it. I thought my issues might have something to do with the mutability properties of Array, but I am not sure. So we have these "buckets" coming in from Firebase and I'm pushing them into an array which then gets passed into a child component. This all works and the Array gets filled rather quickly, but it takes several seconds for it to render on the page. (However when I try adding a few setIntervals and setTimeouts, it works much more quickly, but I'd rather not do that hack unless there is a clean solution that way.) Does anyone understand what is going on behind the scenes well enough to explain it simply to me and help me out? Thanks!

import { Component } from '@angular/core';
import { BucketService } from '../../services';

@Component({
  selector: 'home-page',
  template: `
    <header [title]="'Buckets'"></header>
    <bucketlist [buckets]="buckets"></bucketlist>
  `,
  styleUrls: ['./home.page.scss']
})
export class HomePage {
  buckets: Array<any> = [];
  constructor(public bks: BucketService) {
    bks.subscribe(bucket => {
      console.log('bucket pushed: ', bucket);
      this.buckets.push(bucket);
    });
  }
}

Answer 1

See Solution #2 here: angular2 firebase realtime updating not working

"Simply put the definition inside the class of angular2, not outside, and everything started working as I assumed initialy."