firebase約束からのディスパッチアクション後にngrx storeが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 }); 

しかしクエリは上記のコードサンプルと同じ配列を返しますが、UIが更新されませんが、私は、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) 
    ); 

は角度のための完全に正常な動作です、私のfirebase database

Answer 1

のURLです。クエリの約束はAngularライフサイクルの一部ではありません。 Firebaseプラグインに特有のものではありません。

NgZoneを使用すると、結果がAngularライフサイクルにアタッチされ、ビューが更新されます。 @Componentconstructorにzone: NgZoneを注入し、(result) => {の後ろのものをthis.zone.run(() => { /* your result-handling code here */})にラップします。