1

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);
    });
  }
}
jaruesink
  • 1,205
  • 2
  • 14
  • 24
  • Probably try using concat instead of push to trigger change detection. Or just below your push add this.bucket =this.bucket.concat([]) – Krishnanunni Jeevan Oct 22 '16 at 05:47
  • tried this.buckets = this.buckets.concat([bucket]); and the other way. It consoles out correctly, but still delays for several seconds before rendering. :-/ – jaruesink Oct 22 '16 at 06:10
  • so I guess it's not the mutability issue – jaruesink Oct 22 '16 at 06:11
  • Try to use `ChangeDetectorRef` like `cd.detectChanges()` See also http://stackoverflow.com/questions/35177288/angular2-firebase-realtime-updating-not-working?noredirect=1&lq=1 – yurzui Oct 22 '16 at 07:11

1 Answers1

0

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."

Community
  • 1
  • 1
jaruesink
  • 1,205
  • 2
  • 14
  • 24