Angular 2的变更检测在数组和@ input上延迟了几秒钟

Question

我知道Angular 2中有很多关于变更检测的信息，我一直在尽我最大的努力去理解它。我认为我的问题可能与数组的可变性属性有关，但我不确定。我们有这些桶从Firebase进来我把它们推入一个数组然后传递给子组件。这一切都是有效的，数组很快就会被填充，但它需要几秒钟才能在页面上呈现。(然而，当我尝试添加一些setinterval和settimeout时，它的工作速度要快得多，但我宁愿不这样做，除非有一个干净的解决方案。)有没有人知道幕后发生了什么足以简单地向我解释并帮助我?谢谢!

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

参见解决方案#2:angular2 firebase实时更新不工作

"只要把定义放在angular2的类中，而不是放在外面，一切就像我最初设想的那样开始工作了。"