即使在加载数据后，Angular2 中的异步数据绑定也需要时间答案

【问题标题】：Async data binding in Angular2 taking time even after data is loaded即使在加载数据后，Angular2 中的异步数据绑定也需要时间
【发布时间】：2017-03-21 05:58:12
【问题描述】：

我在 Angular2 中使用 Firebase 来获取对象。

import { Component, OnInit } from '@angular/core';
import { AngularFire, FirebaseObjectObservable } from 'angularfire2';
import { ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  fireObj: FirebaseObjectObservable<any>;

  constructor(private af: AngularFire, private route: ActivatedRoute) {

  }

  ngOnInit() {

    this.route.params.forEach((params: Params) => {
     let id = params['id'];

      this.fireObj = this.af.database.object("/path/" + id);

      this.fireObj.subscribe(data => {
        if(data.$value !== null) {
          console.log(data);
        }else {
          console.log("failed");
        }
      });

     });
  }
}

我在模板中绑定fireObj：

<p>{{ (fireObj | async)?.title }}</p>

一切正常，但有时控制台会记录 data（比如 1 秒后），但 dom/template 会在 5-10 秒后更新。

这种行为有什么特别的原因吗？

【问题讨论】：

我唯一的猜测是异步调用发生在 ngZone 之外，请尝试查看
@SyntacticFructose 谢谢你的建议，我会调查的。但是行为应该保持一致对吗？有时，它会正常响应。我还注意到，更改路径参数的id 会导致正常行为，但多次重新加载页面（对于相同的 id）会产生问题。

标签： angular typescript firebase observable

【解决方案1】：

我通过显式调用ngZone 的run() 方法解决了这个问题。

this.fireObj.subscribe(data => {
    // some other code.
    this._ngZone.run(() => {});
});

我知道这不是最好的解决方案，但我确保 _ngZone.run() 只被调用一次（即在第一次回调期间），因为在 Angular 正常绑定到它之后。

感谢@SyntacticFructose 指引我正确的方向。

【讨论】：