无法在视图ng-repeat中反映$http的响应

21 浏览
0 Comments

无法在视图ng-repeat中反映$http的响应

我已经看到了其他相关问题，并根据我理解的最佳答案进行了实施。但是，我无法在视图中使用ng-repeat显示响应。以下是我的代码。

JS文件：

app.controller('testcontrol', ['$scope', '$http', function($scope, $http) {
    $scope.resultset = [];
    $http.get('http://localhost:3000/testdata').then(function(data) {
      $scope.resultset = data.data.resultset;
      console.log($scope.resultset);
      },function(error) {
        $scope.error = error;
      })
}]);

HTML：

    
    
  • 
        {{result.name}}
    
    •

我可以在控制台中看到数据。但是，我无法在视图中显示。我不知道为什么。我使用了promise，并初始化了变量，以确保ng-repeat不会出错。

控制台响应：

[Object, Object, Object, Object, Object]
0: Object
avatar: "img/a4.jpg"
followers: "2104"
name: "Chris Fox"
title: "Master Chef"
url: "#"
__proto__: Object
1: Object
2: Object
3: Object
4: Object
length: 5
__proto__: Array[0]

0

2 答案

0 Comments

问题的原因是作用域问题。在Angular中，不能直接交换对象或数组。

要使其正常工作，请使用angular.copy：

app.controller('testcontrol', ['$scope', '$http', function($scope, $http) {
    $scope.resultset = [];
    $http
      .get('http://localhost:3000/testdata')
      .then(function(data) {
        angular.copy(data.data.resultset, $scope.resultset); // 在这里
        console.log($scope.resultset);
      }, function(error) {
        $scope.error = error;
      });
}]);

更新：

我终于找到了文档。它有点冗长，但被认为是理解AngularJS 1.x的基础知识。我建议从头到尾阅读该文档 🙂

不，不是这样的。正如我所提到的，控制台响应符合预期。所以，数组赋值没有问题。

你的数据没问题。问题是你不能直接将数组赋值给$scope.resultset，因为这会改变该数组的引用。在这种情况下，你需要使用angular.copy来保留其引用。（我仍在查找文档...）

我尝试了你的解决方案。视图中仍然没有显示任何内容。

在这个plunker中它是工作的。

嘿，感谢你的plunker。它起作用了，这是一个作用域问题，而不是代码问题。你的plunker帮助我解决了这个问题。

不客气。我已经添加了文档，你可以看一下 🙂

让我们在聊天中继续讨论。

0
0 Comments

问题的原因是ng-init指令的使用方式不正确。ng-init指令应该用于进行初始化调用，但是在这个例子中，控制器的逻辑被放在了模板中。这种“模板初始化控制器”的思路并不正确。控制器应该自己初始化自己的逻辑，这样逻辑流程会更加清晰。此外，使用ngInit会使控制器变得更难测试。你最终会为控制器测试创建模拟模板，而这其实是不必要的。

解决方法是将ng-init指令去掉，改为在控制器中调用初始化函数init()。这样做的好处是，可以在需要的时候调用该方法，同时也可以重复使用同一个方法。确保在数组result中获取到数据。

具体代码如下：

app.controller('testcontrol', ['$scope', '$http', function($scope, $http) {
    $scope.resultset = [];
    $scope.GetData = function(){
       $http.get('http://localhost:3000/testdata').then(function(data) {
          $scope.resultset = data.data.resultset;
          console.log($scope.resultset);
      }, function(error) {
        $scope.error = error;
      })
    }
    $scope.init = function(){
        $scope.GetData();
    }
}]);

HTML部分代码如下：


    
    
        
  • 
            {{result.name}}
        
    •

本文介绍了“Unable to reflect $http response in the view ng-repeat”问题的原因和解决方法。问题的原因是ng-init指令的使用方式不正确，解决方法是将ng-init指令去掉，改为在控制器中调用初始化函数init()。这样可以保证在视图中正确显示$http的响应数据。

0