javascript - Angular 2 の変更検出は、配列と @Inputs で数秒遅れました

Question

私は Angular 2 の変更検出に関する情報が山ほどあることを知っており、それを理解するために最善を尽くしてきました。私の問題は、配列の可変性プロパティと関係があるのではないかと思いましたが、よくわかりません。これらの「バケット」が Firebase から入ってくるので、それらを配列にプッシュし、それを子コンポーネントに渡します。これはすべて機能し、配列はすぐにいっぱいになりますが、ページに表示されるまで数秒かかります。(ただし、いくつかの setIntervals と setTimeouts を追加しようとすると、はるかに迅速に動作しますが、そのような明確な解決策がない限り、そのハックを実行したくありません。) 舞台裏で何が起こっているのかを十分に理解している人はいますか?簡単に説明して助けてくれませんか？ありがとう！

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);
    });
  }
}