我正在学习MEAN,我试图显示来自对象的信息,它具有2个数组,它可以正常工作,因为我可以看到带有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

我希望有一个人可以帮助我。

谢谢你的帮助。

最佳答案

您的问题是响应的分配-应该是:

$scope.books = response.data;


请注意,您必须在控制台中如何扩展data才能看到阵列-因为您的响应是一个对象,包含data作为阵列的键。

10-05 20:53
查看更多