Javascript 角度不'；更改阵列时更新视图

我从服务更新了阵列，但视图未更新

当我调用

$scope.$apply（）

或

$scope.$digest

时，它会记录

$digest已在进行中

这是我的main.html文件

ctrl.flightsTo

是我提到的数组

<md-progress-linear class="md-accent" ng-hide="ctrl.isFlightDataLoaded" mode="indeterminate"></md-progress-linear>
<div class="md-padding">
  <md-autocomplete
      ng-show="ctrl.isFlightDataLoaded"
      md-selected-item="ctrl.selectedItem"
      md-selected-item-change="ctrl.selectedItemChange(item)"
      md-search-text="ctrl.searchText"
      md-items="item in ctrl.querySearch(searchText)"
      md-item-text="item.name"
      md-min-length="0"
      placeholder="Choose a destination">
    <md-item-template>
      <span md-highlight-text="ctrl.searchText">{{item.name}} - {{item.iata}}</span>
    </md-item-template>
  </md-autocomplete>
  <ul>
    <li ng-repeat="flight in ctrl.flightsTo">{{flight}}</li>
  </ul>
</div>

最后，我附加了我的flightDataService

它只返回保存的数据

.factory('flightDataService', function($http, $q, papa) {
    var FLIGHT_DATA_URL = 'https://s3-ap-southeast-2.amazonaws.com/glow-dev-assets/flight-data-gz.csv';

    var self = this;
    self.flights = [];
    self.airports = [];
    self.routes = [];
    self.loadAll = loadAll;
    self.getAirports = getAirports;
    self.getFlightsTo = getFlightsTo;

    function loadAll() {
      var deferred = $q.defer();

      loadAirportData().then(function(airports) {
        loadFlightData().then(function(flights) {
          processFlightData(flights, airports);
          deferred.resolve();
        }).catch(function(error) {
          deferred.reject(error);
        });
      }).catch(function(error) {
        deferred.reject(error);
      });
      return deferred.promise;
    };

    function loadAirportData() {
      var deferred = $q.defer();
      $http({
        method: 'GET',
        url: '/assets/airports.json'
      }).then(function(response) {
        deferred.resolve(response.data);
      }, function(error) {
        deferred.reject(error);
      });
      return deferred.promise;
    };

    function loadFlightData() {
      var deferred = $q.defer();
      $http({
        method: 'GET',
        url: FLIGHT_DATA_URL
      }).then(function(response) {
        deferred.resolve(response.data);
      }, function(error) {
        deferred.reject(error);
      });
      return deferred.promise;
    };

    function processFlightData(data, airports) {
      self.flights = papa.parse(data, { header: true }).data;

      var dests = self.flights.map(function(flight) { return flight.destination });
      var destSet = new Set(dests);
      destSet.forEach(function(dest) {
        var airport = airports.find(function(airport) {
          return airport.iata === dest
        });

        if (typeof airport !== 'undefined') {
          self.airports.push(airport);
        }
      });

      self.flights.forEach(function(flight) {
        var origin = flight.origin;
        var dest = flight.destination;

        if (typeof self.routes[dest] === 'undefined') {
          self.routes[dest] = [];
        }
        if (typeof self.routes[dest][origin] === 'undefined') {
          self.routes[dest][origin] = {
            date: flight.date,
            delay: flight.delay,
            distance: flight.distance
          };
        }
      });

      return self.flights;
    };

    function getAirports() {
      return self.airports;
    };

    function getFlightsTo(destination) {
      return self.routes[destination];
    };

    return self;
  });

当我在控制台上登录时

它总是变化得很好

---

但视图保持与空数组相同的状态。

我最初删除了此注释，因为我有一段时间没有做angular，并且对controlleras语法感到困惑，但实际上它在某些方面仍然可能是常用的

ngRepeat使用$watchCollection检测数组中的更改-这将跟踪数组中单个值的更改。这就是Angular文档所说的

再进一步看，实际上听起来，$watchCollection可以处理数组的一个副本，而这个副本实际上只是数组引用的一个副本，这是应用程序首先初始化的

在您的情况下，每次更新数组时，都会将其指定给数组，因此您会更改它指向的引用。但是$watchCollection仍然只监视它保留引用的原始数组中的值更改

您可能需要设置一个额外的手表，以查看对阵列的引用更改

---

这是一个评论，而不是一个实际的答案，但这太长了，无法进入评论部分。希望这是有帮助的。

这与其说是一个答案，不如说是我发现自己处于类似情况时使用的一个技巧：注入$timeout并使用它在$http调用的上下文之外进行最终更新：

$timeout(function () {
    processFlightData(flights, airports);
    deferred.resolve();
}

---

显然，这并不能解决问题，也不能解释为什么会发生这种情况，但如果您只需要让应用程序正常工作，这可能是一种切实可行的解决方法。

尝试以下方法：当您使用简单的javascript函数时，angular不会将更改应用于该函数内的变量

function selectedItemChange(item) {
  if (typeof item !== 'undefined') {
    $scope.flightsTo = flightDataService.getFlightsTo(item.iata);
    $scope.$$phase || $scope.$apply();
  }
};

或者您也可以使用函数表达式，将函数放入$scope变量中，如

 $scope.functionName = function () {}

终于，我找到了

因为我的

flightsTo

变量是关联数组，Angular不会更新它

所以我把它改为普通数组

而且，我的意见也是正确的

---

谢谢大家

使用

$scope

代替

var self=this

@azad我已经用

$scope

代替

self

。但是它不起作用。您是否在

self.flightsTo=flightDataService.getFlightsTo（item.iata）之后直接调用
$scope.apply（）
此行？我看到您正在使用http调用，这里的回答可能有助于您在http调用之后直接执行
$scope.apply（）
calls@Matthias我确实在self.flightsTo=flightDataService.getFlightsTo（item.iata）之后调用了
$scope.$apply（）

但它会出现错误，例如，

$digest已在进行中

 $scope.functionName = function () {}