$解决的问题:角JS响应假($resolved: false in Angular JS respo

2019-09-29 06:41发布

我设置了一个角JS应用程序,消耗了Django的REST API。
我想说明的教室的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
我该如何解决?
更新:

既然我能不能解决问题,我在想,也许我已经设置了严重别的东西,像...的看法?
这是一个我

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

也许我要补充的东西的主页或以其他方式设置它?

更新:

这就是我与调试器“上的”在控制台上

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:

当你调用$资源的查询,它返回一个对象或数组$参考解析=假,直到REST API调用完成并填充你的对象。 所以,$解决= FALSE可能是正确的,表明你还没有收到数据呢。

这是一个基于代码的工作plunker。

控制器是:

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网络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 =这和ControllerAs语法,以避免任何范围问题, 基于这篇文章。

在ngResource从DOC:“重要的是要认识到,调用$资源对象方法立即返回一个空引用(对象或取决于IsArray的数组)是很重要的。一旦数据从现有参考填充与实际数据的服务器返回。这是一个有用的技巧,因为通常的资源分配给一个模型,然后通过所述视图中呈现。具有不呈现一个空对象的结果,一旦数据从所述服务器则该对象被填充以数据和视图到达自动重新呈现自身,显示新的数据。这意味着,在大多数情况下,一个从来没有写一个回调函数的操作方法“。

让我们知道这会有所帮助。



文章来源: $resolved: false in Angular JS response