Question

我正在设置一个Angular JS应用程序来使用Django REST API，而且我仍然坚持渲染数据。
我已经问了另一个问题（this），但是我给出的解决方案并不起作用。

我想知道API视图中可能存在错误，尝试从Angular控制器渲染数据时会出现问题吗？

无论如何，这是我的Angular app +模板（按照其他stackoverflow问题的建议编辑）

base.html文件

<body ng-app="schoolApp" ng-controller="schoolCtrl as vm">
    <p>Hello {{vm.name}}!</p>
    <div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Classroom</th>
                    <th>School</th>
                    <th>Floor</th>
                    <th>Academic year</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="classroom in vm.classrooms">
                    <td>{{classroom.classroom}}</td>
                    <td>{{classroom.school.school_name}}</td>
                    <td>{{classroom.floor}}</td>
                    <td>{{classroom.academic_year}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

app.js

var schoolApp = angular.module('schoolApp', ['ngResource']);

schoolApp.factory('Classroom', ['$resource', function($resource) {
    return $resource('/classrooms/?format=json', {}, {
        query: {
            method: 'GET',
            isArray: true,
        }
    });
}]);

schoolApp.controller('schoolCtrl', function($scope, Classroom) {
  var vm = this;
  vm.name = 'World';
   Classroom.query().$promise.then(function(data) {
     console.log('Success: '+JSON.stringify(data));
     vm.classrooms = data;

   }, function (reason) {
     console.log('ERROR: '+JSON.stringify(reason));
   });
});

我在想这个视图可能存在一些问题，所以这里是REST API视图

class HomePageView(TemplateView):
    template_name = 'school_app/base.html'

class StudentViewSet(viewsets.ModelViewSet):
    queryset = Student.objects.all()
    serializer_class = StudentSerializer


class ClassroomViewSet(viewsets.ModelViewSet):
    queryset = Classroom.objects.all()
    serializer_class = ClassroomSerializer

我做错了什么？

更新：

这就是我得到的

控制台上的数据：是的。
表格数据：no。

Answer 1

当您使用controllerAs语法时，您已将所有数据绑定到控制器上下文。因此，您可以使用其vm.classrooms

等别名获取视图数据

<tr ng-repeat="classroom in vm.classrooms">

Answer 2

您是否尝试在html中输出变量vm.classrooms的内容。

你可以用

<pre>{{vm.classrooms|json}}</pre>

来完成

在我看来，你没有正确绑定表格中的变量，

我无法在图片中清楚地看到它，它可以是{{classroom.school.academic_year}} ??

角度模板不会从控制器呈现数据

2 个答案: