組件屬性更改沒有反映在UI

我有一個列表組件和項目組件。列表組件從服務器獲取數據並使用項目組件來呈現每條數據。我正在使用firebase將數據更改從服務器推送到客戶端。組件屬性更改沒有反映在UI

這是List組件

angular.module('app') 
    .component('orderList', { 
    templateUrl: 'templates/orders/list.html', 
    controller: function($rootScope, $scope, $element, $attrs, loading, popup, toast, orders) { 
     var vm = this; 

     vm.orders = []; 

     vm.$onInit = function() { 
     orders.all(). 
     then(function(data) { 
      vm.orders = data; 
     }) 

     firebase.database().ref('/orders/10'). 
     on('child_changed', function(snapshot) { 
      var order = vm.orders.filter(function(o) { return 0.id == snapshot.key })[0]; 
      if(order) { 
      var index = vm.orders.indexOf(order); 
      _.merge(vm.orders[index], snapshot.val()); 
      } 
     }) 
     } 
    } 
    })

和項目組件

angular.module('app') 
    .component('orderItem', { 
    templateUrl: 'templates/orders/item.html', 
    bindings: { 
     item: '<' 
    }, 
    controller: function($rootScope, $scope, $element, $attrs) { 
     var vm = this; 
    } 
    })

列表組件的HTML

<order-item ng-repeat="order in $ctrl.orders" item="order"></order-item>

該項目組成部分的html

<div class="item-image"><img src="img/drawer-header-bg.png"></div> 
<div class="item-status">{{ $ctrl.item.status }}</div>

觸發'child_changed'事件並且項目數據與來自Firebase的數據合併時，視圖不會更新。

來源

2016-09-14 MrFoh

我沒有看到模板連接到'orderList'組件，您應該加上' templateUrl：'list.component.html'在那裏 –

@PankajParkar用模板更新了問題 – MrFoh

您正在更改角度上下文之外的事件內部的範圍數據。

就像與任何事件;您需要更新的範圍（$範圍在$ ...等）：

$scope.$apply();

來源

2016-09-14 19:18:36 gyc

組件屬性更改沒有反映在UI

回答

相關問題