ng-repeat不显示来自http请求的数据。检查时得到评论

Question

我的

homeController.js

obj

var app = angular.module('myApp');
app.controller('HomeController', 
function($scope, $http, $rootScope, $stateParams, $state, LoginService) {
$scope.user = $rootScope.userName;
console.log("Starting http request");
$http.get("http://127.0.0.1:5000/trying").success(function (response) {
      $scope.myData = response.users;
      console.log(response);
  });
console.log("ending http request");
});

Console

Response object

home.html正在从index.html呈现。这样做很好，可以显示正在登录的用户。但是，ng-repeat无法正常工作。在检查其显示时，其已被注释掉。我在做什么错了？

Answer 1

1. 我将确保$ scope.myData存在于http.get函数之外。在http.get函数上方，$ scope.user下，将其定义为数组或字典/ obj。这样，视图便知道了期望。
2. myData是数组还是字典？确保您使用正确的循环语法（x in myData和x of myData）。也可以做(dataKey, dataValue) in myData
3. 如果内容依赖于http调用，我通常向ng-repeat添加ng-if="!isLoading"。最初，我在this。$ onInit函数中设置（一旦页面准备好初始化，它将自动调用），然后在响应中将其设置为isLoading = false。

`

this.$onInit = function(){
  $scope.isLoading = true;
  // rest of the stuff like http.get...
  $http.get("http://127.0.0.1:5000/trying").success(function (response) 
    $scope.myData = response.users;
    $scope.isLoading = false;
    console.log(response);
  });
};

`

让我知道是否对您有帮助。您的视图，也可能是由于其他原因该视图未更新。

专业提示：最初定义$ scope.myData时，如果希望ng-repeat正确运行，则它必须与返回的变量类型相同。 这些都不是，“声明为[]，但随后通过api调用以{}填充”。

这是可以使您难堪的事情之一，因为香草javascript通过可变类型交换非常好用。该视图将只忽略代码气味，而不执行任何操作……如果您不知道要查找的内容，这将非常令人沮丧。这就是为什么一些开发人员开始使用打字稿和其他类型的javascript的原因，它们在允许您处理变量的内容上更加固定……但这完全是另一篇文章。