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

Question

我正在从 Firebase 获取数据，并且我希望我的组件视图应该在数据可用时更新，但它需要超过 15 sec 来更新视图上的数据。以下是我的组件和模板代码。

在我的情况下，数据可用性和视图绑定之间存在一些延迟，为什么？或者如何通知 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);
        });
    }
}

模板：

...

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

</tr>

...

Answer 1

您需要使用 NgZone，因为 firebase.database.Database 更新发生在 Angular 区域之外并且不会触发更改检测：

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

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