Question

我正在设置一个消耗Django REST API的Angular JS应用程序我想显示教室的HTML列表这是我的模板

<body>
    <div ng-app="schoolApp" ng-controller="schoolCtrl">
        <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 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>

这是脚本

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) {
        Classroom.query().$promise.then(function(data) {
        var data = Classroom.query({});
        $scope.classrooms = data;
        console.log(Classroom.query({}));
    });
 });

问题是，我认为，我得到了 - 我可以在控制台中看到它，$resolved: false。我怎么解决这个问题？
UPDATE：

鉴于我无法解决这个问题，我想知道也许我已经设置了很多别的东西，比如...视图？
这是我得到的那个

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

也许我必须向HomePageView添加内容或以其他方式设置它？

更新：

这是我在控制台上使用调试器“on”

获得的

Success: [{"school":{"id":1,"school_name":"IPSIA F. Lampertico","address":"Viale Giangiorgio Trissino, 30","city":"Vicenza"},"academic_year":"2015/2016","classroom":"1^A","floor":0,"students":[{"classroom":1,"first_name":"Stefano","last_name":"Rossi","gender":"M","birthday":"1998-06-22"},{"classroom":1,"first_name":"Luca","last_name":"Possanzini","gender":"M","birthday":"1999-11-22"}]},{"school":{"id":2,"school_name":"ITIS A. Rossi","address":"Via Legione Gallieno, 52","city":"Vicenza"},"academic_year":"2015/2016","classroom":"2^B","floor":0,"students":[{"classroom":2,"first_name":"Sergio","last_name":"Lazzari","gender":"M","birthday":"2001-01-29"}]},{"school":{"id":3,"school_name":"Liceo Scientifico G.B. Quadri","address":"Viale Giosuè Carducci, 17","city":"Vicenza"},"academic_year":"2015/2016","classroom":"3^C","floor":0,"students":[{"classroom":3,"first_name":"Lucia","last_name":"Modella","gender":"F","birthday":"2000-05-22"}]},{"school":{"id":4,"school_name":"Istituto Professionale Statale B.Montagna","address":"Via Mora, 93","city":"Vicenza"},"academic_year":"2015/2016","classroom":"4^D","floor":1,"students":[{"classroom":4,"first_name":"Mirko","last_name":"Van Der Sella","gender":"M","birthday":"2002-12-25"}]}]

实际上，整个Json的反应。

Answer 1

当您调用$ resource的查询时，它会返回对$ resolved = false的对象或数组的引用，直到REST API调用完成并填充您的对象。因此，$ resolved = false可能是正确的，表示您尚未收到数据。

这是working plunker based on your code.

控制器是：

app.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 Web API所做的...一旦调用工作，你可以切换到更轻的版本：

app.controller('schoolCtrl', function($scope, Classroom) {
  var vm = this;
  vm.name = 'World';
  vm.classrooms = Classroom.query();
});

我创建了一个教室JSON（猜测你的格式）：

[
    {"classroom":"0", "school": {"school_name":"anc"} },
        {"classroom":"1", "school": {"school_name":"Sorbonee"} }

    ]

HTML：

<body 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>

我更改了工厂中的URL以使其在plnkr上运行，但其余部分完全相同：

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

请注意，我使用var vm = this和ControllerAs语法来避免任何范围问题based on this article.

来自doc的ngResource：“重要的是要意识到调用$ resource对象方法会立即返回一个空引用（对象或数组，具体取决于isArray）。一旦从服务器返回数据，就会填充现有引用实际数据。这是一个有用的技巧，因为通常将资源分配给一个模型然后由视图呈现。拥有一个空对象导致无法渲染，一旦数据从服务器到达，那么该对象将填充数据并且视图会自动重新呈现自己显示新数据。这意味着在大多数情况下，人们永远不必为动作方法编写回调函数。“

如果有帮助，请告诉我们。

$ resolve：在Angular JS响应中为false

1 个答案: