不显示 view/html angular 中的对象

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 中的对象

Doesn't display the object in view/html angular

html

javascript

angularjs

mean-stack