Question

我通过$ http.get（）从API获取数据对象。这是我的角度控制器：

angular.module('supernovaWebApp',['ui.router'])
  .controller('professoresCtrl', ['$scope', '$http', function($scope, $http){
        $http.get("http://localhost:3000/api/instructors/"+instructorId).success(function(data,status){
          console.log(data);
          $scope.professor = data;        
        });
      };
  }])
  .config(function($stateProvider){
    $stateProvider.state('instructor', {
      url: '/instructor',
      templateUrl: 'views/instructor.html',
      controller: 'professoresCtrl'
    });
  });

对象返回时没有错误，并且可以在webbrowser控制台中看到它，但视图中没有显示任何信息。

<div>
  <div class="mdl-cell mdl-cell--4-col">
    <div  class="mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">{{professor.name}} {{professor.last_name}}</h2>
      </div>
      <div class="mdl-card__supporting-text">
        <p>{{professor.profession}}</p>
        <i class="material-icons md-18">phone</i> {{professor.phone}}
      </div>
      <div class="mdl-card__menu">
        <button ng-click="delInstructor(instructor)" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" >
          <i id="btn-archive" class="material-icons" >clear</i>
          <span class="mdl-tooltip" data-mdl-for="btn-archive">
            Arquivar
          </span>
        </button>
      </div>
    </div>
  </div>        
</div>

奇怪的是，当我获得一个对象数组并使用ng-repeat来显示时，此代码可以正常工作。我搜索了一些问题，但无法找到解决方案。我错过了什么？请你帮帮我。我被困了。

打印控制台。正确显示的对象是id为1的对象。 Console print enter image description here

当我做同样的事情从数据库中获取多个对象时，它可以工作。这是类似的代码。

angular.module('supernovaWebApp',['ui.router'])
  .controller('professoresCtrl', ['$scope', '$http', function($scope, $http){
      
      var getInstructors = function(){
        $http.get("http://localhost:3000/api/instructors").success(function(data,status){
          console.log(data);
          $scope.instructors = data;
        });
      };
    getInstructors();
  }])
  .config(function($stateProvider){
    $stateProvider.state('instructors',{
      url: '/instructors',
      templateUrl: 'views/instructors.html',
      controller: 'professoresCtrl'
    });
  });

<div ng-repeat="instructor in instructors">
  <div class="mdl-cell mdl-cell--4-col">
    <div  class="mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">{{instructor.name}} {{instructor.last_name}}</h2>
      </div>
      <div class="mdl-card__supporting-text">
        <p>{{instructor.profession}}</p>
        <i class="material-icons md-18">phone</i> {{instructor.phone}}
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a ui-sref="instructor" ui-sref-active="active" ng-click="getInstructor(instructor.id)" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
          Veja mais!
        </a>
      </div>
      <div class="mdl-card__menu">
        <button ng-click="delInstructor(instructor)" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" >
          <i id="btn-archive" class="material-icons" >clear</i>
          <span class="mdl-tooltip" data-mdl-for="btn-archive">
            Arquivar
          </span>
        </button>
      </div>
    </div>
  </div>        
</div>

Answer 1

在Fissio发表评论后更新

折旧$http.get(..).success()的签名与使用promises的较新$http.get(..).then(...)的签名不同。因此，$scope.professor = data是$scope.professor = data.data

的旧方法

旧答案

$ http返回一个响应对象。您的实际数据位于“response.data”中。因此，您使用的$scope.professor = data;应该是$scope.professor = data.data。虽然这不能解释数组上的正确行为..

Angular视图是返回$ http.get请求的对象的空白

1 个答案: