无法读取 Angularjs 1.6.6 中未定义的 属性 'length'

Question

我必须下拉列表并希望根据第一个列表中的选定值填充第二个列表。我在填充第一个列表时遇到问题。我使用课程服务的 getCurrentSessionCourses() 方法从服务器获取数据并从该数据填充第一个列表。第一个列表填充在 for 循环中。如果 for 循环在服务器响应之前执行，则 i < $scope.Courses.length 具有未定义的值。 有时数据在for循环执行前就来了，有时数据在for循环执行后才来。下面是我的 AddStudentController.js 和相关的 HTML

   

 (function(){

     var myApp = angular.module("myApp");

        var AddStudentController = function ($scope,StudentService,CourseService) {
        
         var onCourses = function (data) {
                var result = [];        
                for (var i = 0; i < $scope.Courses.length; i++) {
                    for (var j = 0; j < data.length; j++) {
                      if (data[j].IdCourse ===  $scope.Courses[i].idCourse) {
                            if (result.indexOf(data[j]) === -1) {
                                result.push(data[j]);
                            }
                        }
                    }
                }
                 $scope.courses = result;
                $scope.selectedCourse = result[0];

                var IdCourse = $scope.selectedCourse.IdCourse;
                var IdSessionCourse = null;
                for (var i = 0; i < $scope.Courses.length; i++) {
                    if ($scope.Courses[i].idCourse === IdCourse) {
                        IdSessionCourse = $scope.Courses[i].idSessionCourse;
                    }
                };
                CourseService.getCourseClasses(IdSessionCourse).then(function (classes) { 
                $scope.classes = classes;
                $scope.selectedClass = classes[0];
                });
        
        CourseService.getCurrentSessionCourses().then(function (courses) { $scope.Courses = courses });
        CourseService.courses().then(onCourses); 
        };
        
        myApp.controller("AddStudentController", AddStudentController)
        
    }());

////Below is CourseService.js

    (function () {
    
        var CourseService = function ($http) {
    
            var urlBase = 'api/CoursesAPI';
    
            var getCurrentSessionCourses = function () {
                return $http.get("api/CoursesAPI/GetCurrentSessionCourses")
                    .then(function (response) {
                        return response.data;
                    });
    
    return {
     getCurrentSessionCourses: getCurrentSessionCourses,
    };
            };
     var module = angular.module("myApp");
        module.factory("CourseService", CourseService);
    }());

 

<div class="col-lg-5">
    <div class="form-group">
         <label>Select Course</label>
          <select ng-model="selectedCourse" ng-change="change()" class="formcontrol" 
        ng-options="course.IdCourse as course.Name for course in courses"> 
       </select>
    </div>
 </div>
  <div class="col-lg-5">
      <div class="form-group">
         <label>Select Class</label>
         <select ng-model="selectedClass" class="form-control" ng-options="class.idClass as class.className +' : '+class.campusName  for class in classes"></select>
   </div>
  </div>

Answer 1

尝试在 CourseService.getCurrentSessionCourses() 之后以这种方式调用 CourseService.courses()：

CourseService.getCurrentSessionCourses().then(function (courses) { 
    $scope.Courses = courses;
    CourseService.courses().then(onCourses);
});

通过这种方式，您可以确保 $scope.Courses 在您尝试对其进行迭代时具有一定的价值。

Answer 2

尝试初始化$scope.Courses = []。

当 angular 呈现页面时，它将找不到任何 $scope.Courses 对象，直到您将响应分配给 $scope.Courses，从而抛出

$scope.Courses.length has undefined value

var myApp = angular.module("myApp");
    $scope.Courses = []; // Add this line
    var AddStudentController = function ($scope,StudentService,CourseService) {

     var onCourses = function (data) {

...