ngrx 商店不会在 Firebase 承诺调度操作后更新界面

Question

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

当我使用示例数组并更新商店而不与 firebase 集成时，程序工作正常。用户界面也会更新。

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 查询检索相同的数据时，尽管查询返回的数组与上述代码示例中的数组相同，但界面不会更新。以下是从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)
);

这是我的火力数据库的网址

Answer 1

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

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