Question

我正在学习MEAN，我试图显示来自对象的信息，它有2个数组，它semms正在工作，因为我可以通过Javascript的控制台日志看到该对象，但它并没有以html显示。

我的javascript（books.js）代码

    var myApp = angular.module('myApp');

myApp.controller('BooksController', ['$scope', '$http', '$location', '$routeParams',function($scope, $http, $location, $routeParams){
  console.log("BooksController loaded");

  $scope.getBooks = function(){
    $http.get('/api/books')
    .then(function(response){
      console.log(response)
      $scope.books = response;
    });
  }

}]);

我的代码来自html（book.html）

    <div class="panel panel-default" ng-init="getBooks()">
  <div class="panel-heading">
    <h3 class="panel-title">Latest Books</h3>
  </div>
  <div class="panel-body">
    <div class="row">
      <div ng-repeat="book in books">
        <div class="col-md-3">
          <div class="col-md-6">

            {{book.title}}
            <p>
              {{book.description}}
            </p>
          </div>
          <div class="col-md-6">
            <img src="{{book.image_url}}" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

使用控制台获取数据的图像

Screenshot of object

问题是我无法弄清楚如何解决它，因为它没有在book.html中显示。

Screenshot of book.html

我希望有人可以帮助我。

感谢您的帮助。

Answer 1

您的问题是响应的分配 - 它应该是：

$scope.books = response.data;

请注意，在您的控制台中，您必须展开data以查看您的数组 - 因为您的响应是一个对象，其中包含data作为您的数组的键。

Answer 2

您需要为其指定response.data

的值

    var myApp = angular.module('myApp');

    myApp.controller('BooksController', ['$scope', '$http', '$location', '$routeParams',function($scope, $http, $location, $routeParams){
    console.log("BooksController loaded");
    $scope.books = '';
    $scope.getBooks = function(){
     $http.get('/api/books')
     .then(function(response){
      console.log(response)
      $scope.books = response.data;
    });
  }

}]);

不以view / html angular显示对象

2 个答案: