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

Question

我有一个列表组件和项目组件。列表组件从服务器获取数据并使用项目组件呈现每条数据。我正在使用 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;
    }
  })

列表组件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 的数据合并时，视图不会更新。

Answer 1

您正在 angular 上下文之外的事件中更改范围数据。

与任何事件 ($scope.$on...etc;) 一样，您需要更新范围：

$scope.$apply();

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

Component property changes not reflecting in UI

angularjs

angular-components

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

Component property changes not reflecting in UI

angularjs

angular-components

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