Angularjs 组件属性更改未反映在UI中

我有一个列表组件和项目组件。list组件从服务器获取数据，并使用item组件呈现每段数据。 我使用firebase将数据更改从服务器推送到客户端

这是列表组件

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;
    }
  })

和项目组件

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;
    }
  })

angular.module（'app'）
.component（'orderItem'{
templateUrl:'templates/orders/item.html'，
绑定：{
项：“您正在angular上下文之外的事件中更改范围数据

与任何事件（$scope.$on…etc；）一样，您需要更新范围：

$scope.$apply();

我没有看到附加到
orderList
component的模板，您应该添加
templateUrl:'list.component.html'
overthere@PankajParkar用模板更新了问题