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();..

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

1 个答案: