从 Firebase Promise 分派操作后，ngrx 商店不更新 UI

我正在尝试使用 Angular 4 开发一个基本的 NativeScript 应用程序。我还使用 ngrx 存储和 firebase 作为实时数据库。

当我使用示例数组并更新存储而不与 firebase 集成时，程序工作正常。 UI 也得到更新。

let value = [
    {
        "description": "Groups discussing about Technology",
        "category": "Tech"
    },
    {
        "description": "Groups for all kinds of sports ",
        "category": "Sports"
    }
];

this.store.dispatch({ type: GroupCategoryListActions.ADD_ITEMS, payload: value });
this.store.dispatch({ type: GroupCategoryListActions.LOAD_SUCCESS });

但是，当我与 firebase 集成并尝试使用 firebase 查询检索相同的数据时，尽管查询返回与上述代码示例中相同的数组，但 UI 并未更新。下面是从 firebase 获取的代码。

firebase.init()
    .then((result) => {
        firebase.query(
            (result) => {
                if(!result)
                    this.store.dispatch({ type: GroupCategoryListActions.LOAD_ERROR });

                this.store.dispatch({ type: GroupCategoryListActions.ADD_ITEMS, payload: result.value });
                this.store.dispatch({ type: GroupCategoryListActions.LOAD_SUCCESS });
            },
            '/groupCategory',
            {
                orderBy: {
                    type: firebase.QueryOrderByType.KEY,
                    value: 'category'
                }
            });
    },
        (error) => console.log("firebase.init error: " + error)
    );

这是我的网址火力数据库 https://console.firebase.google.com/u/0/project/herd-f8b8c/database/data

对于 Angular 来说，这是完全正常的行为；查询承诺不是 Angular 生命周期的一部分。顺便说一下，这并不是 Firebase 插件特有的。

您可以使用 NgZone 将结果附加到 Angular 生命周期，以便您的视图将会更新。注入zone: NgZone在你的@Component constructor然后把东西包起来(result) => { in this.zone.run(() => { /* your result-handling code here */}).