在从 firebase promise 发送操作后，ngrx 商店不更新 UI

Question

我正在尝试使用 Angular 4 开发一个基本的 NativeScript 应用。我也在使用 ngrx store 和 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 查询检索相同的数据时，尽管查询 returns 与上述代码示例中的数组相同，但 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)
    );

这是我的 firebase database

的 url

Answer 1

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

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

中

在从 firebase promise 发送操作后，ngrx 商店不更新 UI

ngrx store does not update UI after dispatched action from firebase promise

firebase

nativescript

firebase-realtime-database

angular

ngrx-store