Question

谁能解释一下console.log为什么突然停止工作？我正在尝试调试Angularjs类的练习，并且在某个时刻，console.log不再打印任何内容。我使用的是chrome，缓存很清晰。

编辑：在此代码段和Firefox中，console.log（）有效，但在Chrome中无效。怎么会来？

(function () {
'use strict';

angular.module('Ass3', [])
.controller('NarrowItDownController', Narrowdown)
.service('MenuCategoriesService', MenuCategoriesService);


Narrowdown.$inject = ['MenuCategoriesService'];
function Narrowdown(MenuCategoriesService){
  var nrdown = this;

  var promise = MenuCategoriesService.getMatchedMenuItems();
}

MenuCategoriesService.$inject = ["$http"]
function MenuCategoriesService($http){
  var service = this;
  console.log("start");
  service.getMatchedMenuItems = function(searchTerm){
    return $http({
      method : 'GET',
      url: ("https://davids-restaurant.herokuapp.com/menu_items.json")
    }).then(function(result){
        var foundname = [];
        angular.forEach(result.data.menu_items, function(value, key){
          var name = value.name;
          //console.log(typeof name);
          if (name.toLowerCase().indexOf("chicken") !== -1){
            foundname.push(name);
          };
        });
        console.log("end");
        return foundname;
        
      });
  }
}

})();

<!doctype html>
<html lang="en" ng-app='Ass3'>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" ></script>
    <script type="text/javascript" src="app.js"></script>
    <title>Narrow Down Your Menu Choice</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles/bootstrap.min.css">
    <link rel="stylesheet" href="styles/styles.css">
  </head>
<body>
   <div class="container" ng-controller="NarrowItDownController as nrdown">
    <h1>Narrow Down</h1>

    <div class="form-group">
      <input type="text" placeholder="search term" class="form-control">
    </div>
    <div class="form-group narrow-button">
      <button class="btn btn-primary">Narrow It Down For Me!</button>
    </div>

    <!-- found-items should be implemented as a component -->
    <found-items found-items="...." on-remove="...."></found-items>
    <ul>
      <li ng-repeat="category in nrdown.categories">
        {{categroy.name}}
      </li>
    </ul>
  </div>

</body>
</html>

Answer 1

您已在return语句后放置日志

return foundname;
console.log("end");

只需像这样交换这些行

console.log("end");
return foundname;

Answer 2

return foundname;应该低于console.log()

(function () {
'use strict';

angular.module('Ass3', [])
.controller('NarrowItDownController', Narrowdown)
.service('MenuCategoriesService', MenuCategoriesService);


Narrowdown.$inject = ['MenuCategoriesService'];
function Narrowdown(MenuCategoriesService){
  var nrdown = this;
  debugger
  var promise = MenuCategoriesService.getMatchedMenuItems();
}

MenuCategoriesService.$inject = ["$http"]
function MenuCategoriesService($http){
  var service = this;
  console.log("start");
  service.getMatchedMenuItems = function(searchTerm){
    return $http({
      method : 'GET',
      url: ("https://davids-restaurant.herokuapp.com/menu_items.json")
    }).then(function(result){
        var foundname = [];
        angular.forEach(result.data.menu_items, function(value, key){
          var name = value.name;
          //console.log(typeof name);
          if (name.toLowerCase().indexOf("chicken") !== -1){
            foundname.push(name);
          };
        });
        console.log("end");
        return foundname;
      });
  }
}

})();

<!doctype html>
<html lang="en" ng-app='Ass3'>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" ></script>
    <script type="text/javascript" src="app.js"></script>
    <title>Narrow Down Your Menu Choice</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles/bootstrap.min.css">
    <link rel="stylesheet" href="styles/styles.css">
  </head>
<body>
   <div class="container" ng-controller="NarrowItDownController as nrdown">
    <h1>Narrow Down</h1>

    <div class="form-group">
      <input type="text" placeholder="search term" class="form-control">
    </div>
    <div class="form-group narrow-button">
      <button class="btn btn-primary">Narrow It Down For Me!</button>
    </div>

    <!-- found-items should be implemented as a component -->
    <found-items found-items="...." on-remove="...."></found-items>
    <ul>
      <li ng-repeat="category in nrdown.categories">
        {{categroy.name}}
      </li>
    </ul>
  </div>

</body>
</html>

console.log在Chrome中不打印任何内容

2 个答案: