Angularjs md自动完成，错误：无法读取属性'；然后'；未定义的

我正在尝试使用mdautocomplete指令和MVC实现autocomplete特性

下面是HTML代码片段

<div ng-controller="BookTicketController as ctrl" layout="column" ng-cloak>
  <md-content class="md-padding">
    <form ng-submit="$event.preventDefault()">
      <md-autocomplete ng-disabled="ctrl.isDisabled" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in ctrl.querySearch(ctrl.searchText)"
      md-item-text="item.display" md-min-length="0" placeholder="Search for stations here!">
        <md-item-template>
          <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
        </md-item-template>
        <md-not-found>
          No matches found
        </md-not-found>
      </md-autocomplete>
    </form>
  </md-content>
</div>

我在声明'angular.js:14525 TypeError:Cannot read property'then'of undefined'时出错

---

你们谁能帮我解决这个问题吗？

你们能

console.log（self.stations）

并告诉我是什么吗？（4）[对象，对象，对象，对象，对象]0:对象显示：“班加罗尔”值：“班加罗尔”原型：对象1:对象2:对象显示：“海得拉巴”值：“海得拉巴”原型：对象3:对象显示：“海得拉巴”值：“hyderabad”proto:Object length:4 proto:Array（0）在得到响应之前禁用自动完成，因为我认为您的api响应需要时间。我得到了预期的站点列表。您在自动完成中没有得到任何建议吗？您能

控制台.log（self.stations）

并告诉我它是什么吗？（4）[对象，对象，对象，对象，对象]0:对象显示：“班加罗尔”值：“班加罗尔”原型：对象1:对象2:对象显示：“海得拉巴”值：“海得拉巴”原型：对象3:对象显示：“海得拉巴”值：“海得拉巴”原型：对象长度：4原型：数组（0）禁用“自动完成”，直到收到响应，因为我认为您的api响应需要时间。我正在按预期获得电台列表。您在“自动完成”中没有收到任何建议吗？

(function() {
  'use strict';
  angular
    .module('myApp', ['ngMaterial'])
    .controller('BookTicketController', BookTicketController);

  function BookTicketController($http, $timeout, $q, $log, $scope) {

    var self = this;

    self.simulateQuery = false;
    self.isDisabled = false;
    // list of `state` value/display objects
    self.stations = loadAll($http);
    self.querySearch = querySearch;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange = searchTextChange;

    //self.newState = newState;

    function querySearch(query) {
      var results = query ? self.stations.filter(createFilterFor(query)) : self.stations,
        deferred;
      if (!query) {
        return;
      }
      if (self.simulateQuery) {
        deferred = $q.defer();
        $timeout(function() {
          deferred.resolve(results);
        }, Math.random() * 1000, false);
        return deferred.promise;
      } else {
        return results;
      }
    }

    function searchTextChange(text) {
      $log.info('Text changed to ' + text);
    }

    function selectedItemChange(item) {
      $log.info('Item changed to ' + JSON.stringify(item));
    }

    function loadAll($http) {
      var allStations = [];
      var result = [];
      $http.get('/Train/GetAllStations')
        .then(function(response) {
          allStations = response.data;
          angular.forEach(allStations, function(station, key) {
            result.push({
              value: station.StationName.toLowerCase(),
              display: station.StationName
            });
          })
        });
      return result;
    }

    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);
      return function filterFn(state) {
        return (state.value.indexOf(lowercaseQuery) === 0);
      };

    }
  }
})();