ngrx商店不會更新用戶界面發出的操作後的用戶界面

我正在嘗試使用Angular 4開發基本的NativeScript應用程序。我還將ngrx商店和firebase用作實時數據庫。ngrx商店不會更新用戶界面發出的操作後的用戶界面

當我使用樣本數組並更新商店並未與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.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) 
    );

這裏是URL我firebase database

來源

2017-08-12 Bharat Gupta

這對角完全正常的行爲;查詢承諾不是Angular生命週期的一部分。順便說一句，這不是特定於Firebase插件的。

您可以使用NgZone將結果附加到Angular生命週期，以便您的視圖更新。在@Componentconstructor中注入zone: NgZone，並在(result) => {的this.zone.run(() => { /* your result-handling code here */})後包裝。

來源

2017-08-12 16:37:24

這工作，但它觸發了兩次。我需要啓用ProdMode還是有其他解決方法嗎？請建議。 –

這些結果對象有差異嗎？當不使用'NgZone'時，它會不會觸發兩次？ –

我比你想象的要麻煩。有效。謝謝:) –

ngrx商店不會更新用戶界面發出的操作後的用戶界面

回答

相關問題