Angular 2 更改检测因数组和@Inputs 延迟了几秒钟

Question

我知道 Angular2 中有大量关于变化检测的信息，我一直在尽我最大的努力去了解它。我认为我的问题可能与数组的可变性有关，但我不确定。所以我们有这些 "buckets" 来自 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);
    });
  }
}

Answer 1

请在此处查看解决方案 #2：

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

Angular 2 更改检测因数组和@Inputs 延迟了几秒钟

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

javascript

arrays

angular

angular2-changedetection

angular2-inputs