从Firebase Promise分派操作后，ngrx存储不会更新UI [英] ngrx store does not update UI after dispatched action from firebase promise

问题描述

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

I am trying to develop a basic NativeScript app using Angular 4. I am also using ngrx store and firebase as a realtime database.

当我使用示例数组并更新存储而不与Firebase集成时，程序运行正常.用户界面也将更新.

When I use a sample array and update the store and not integrate with firebase the program works fine. UI gets updated too.

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获取的代码.

However when I integrate with firebase and try to retrieve the same data using a firebase query, although the query returns the same array as in the above code sample but the UI doesn't get updated. Below is the code to fetch from 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数据库

推荐答案

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

That's entirely normal behavior for Angular; the query promise is not part of the Angular lifecycle. That's not specific to the Firebase plugin by the way.

您可以使用NgZone将结果附加到Angular生命周期，以便您的视图将更新.将zone: NgZone插入@Component constructor，然后将(result) => {之后的内容包装在this.zone.run(() => { /* your result-handling code here */})中.

You can use NgZone to make the result attach to the Angular lifecycle so your view will update. Inject zone: NgZone in your @Component constructor and wrap the stuff after (result) => { in this.zone.run(() => { /* your result-handling code here */}).

这篇关于从Firebase Promise分派操作后，ngrx存储不会更新UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！