Javascript 阵列和@输入的角度2变化检测延迟数秒

我知道Angular 2中有大量关于变化检测的信息，我一直在尽我最大的努力去理解它。我认为我的问题可能与数组的易变性属性有关，但我不确定。所以我们有这些来自Firebase的“bucket”，我将它们放入一个数组中，然后传递到一个子组件中。这一切都是可行的，数组填充得相当快，但需要几秒钟才能在页面上呈现。（然而，当我尝试添加一些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);
    });
  }
}

从'@angular/core'导入{Component}；
从“../../services”导入{BucketService}；
@组成部分({
选择器：“主页”，
模板：`
`,
样式URL:['./home.page.scss']
})
导出类主页{
bucket:Array=[]；
建造商（公共bks:BucketService）{
订阅（bucket=>{
console.log（'bucket pushed:'，bucket）；
这个。铲斗。推（铲斗）；
});
}
}

请参见此处的解决方案#2：

“只要将定义放在angular2类内部，而不是外部，一切都开始按照我最初的假设工作。”

参见此处的解决方案2：

---

“只需将定义放在angular2类中，而不是放在外部，一切都开始按照我最初的假设工作。”

可能尝试使用concat而不是push来触发更改检测。或者在推送的正下方添加this.bucket=this.bucket.concat（[]）尝试了this.bucket=this.bucket.concat（[bucket]）；另一方面。它可以正确地进行控制台输出，但在渲染之前仍会延迟几秒钟-/因此，我想使用

ChangeDetectorRef

与

cd.detectChanges（）

See可能也会尝试使用concat而不是push来触发更改检测。或者在推送的正下方添加this.bucket=this.bucket.concat（[]）尝试了this.bucket=this.bucket.concat（[bucket]）；另一方面。它可以正确地进行控制台输出，但在渲染之前仍会延迟几秒钟-/因此，我想使用

ChangeDetectorRef

与

cd.detectChanges（）类似，这不是易变性问题，请参见