Angular FireBase中数据更改后如何更新/绑定视图？

我正在从Firebase获取数据，我希望我的组件视图应该在数据可用时更新，但更新视图上的数据需要

15秒以上的时间。下面是我的组件和模板代码

在我的例子中，数据可用性和视图绑定之间存在一些延迟，为什么？或者如何通知Angular数据更新，以便立即更新视图

@Component({
    ...
})
export class BoardComponent implements OnInit {
    private db: firebase.database.Database;
    public boards: Array<any>;


    constructor(private route: ActivatedRoute,
        private authService: AuthService) {
        this.db = firebase.database();
        this.boards = new Array<any>();

    }


    ngOnInit() {
        this.loadBoards();
    }

    loadBoards() {
        var ref = this.db.ref('/boards');

        ref.on('child_added', (child) => {
            console.log("Question added! adding data one by one");
            var obj = child.val();
            obj.key = child.key;
            this.boards.push(obj);
        });
    }
}

@组件({
...
})
导出类BoardComponent实现OnInit{
私有数据库：firebase.database.database；
公共董事会：阵列；
构造函数（专用路由：ActivatedRoute，
专用身份验证服务：身份验证服务）{
this.db=firebase.database（）；
this.boards=新数组（）；
}
恩戈尼尼特（）{
这是装载板（）；
}
装载板（）{
var ref=this.db.ref（'/boards'）；
参考日期（'child_added'，（child）=>{
log（“添加问题！逐个添加数据”）；
var obj=child.val（）；
obj.key=child.key；
这个。板。推（obj）；
});
}
}

模板：

...

<tr *ngFor="let item of boards">
    <td>{{item.name}}</td>

</tr>

...

。。。
{{item.name}
...
您需要使用
NgZone
，因为
firebase.database.database
更新发生在角度区域之外，并且不会触发更改检测：

 constructor(private zone: NgZone, private route: ActivatedRoute,

 loadBoards() {
    ...
    ref.on('child_added', (child) => { NgZone.run(()=> {var obj = child.val();..

这可能是因为Angular的默认trackBy函数跟踪对象的引用（由于数组相同，因此不会发生更改，这一点解释得很好。请尝试使用
NgZone
-
ref.on（'child_added'，（child）=>{NgZone.run（（）=>{var obj=child.val（）；
谢谢，
NgZone
解决了我的问题。@PARAMANANDAPRADHAN，酷，把它作为答案贴了出来