AngularJS - 等待来自服务器的数据并将它们正确添加到列表中

AngularJS - wait for data from server and add them correctly to list

我目前正在做一个 AngularJS 项目,我必须从服务器获取特定月份和年份的项目信息并将它们显示给用户。

首先,我要获取一个项目 ID 列表 (projectList),它可以是可变的,然后我需要获取特定年份和月份的这些项目的信息。使用此代码,我试图获取数据并在最后一个项目成功时刷新数据。获取数据后,我使用 ng-repeat 将其显示给用户。

$scope.getData = function(){
        $scope.projectInfoList = [];


        for(var index=0; index < $scope.projectList.length; index++){


            projectService.getProject($scope.model.year, $scope.model.month, parseInt($scope.projectList[index]) ).success(function(data){

                var listInput = { projectID : $scope.projectList[index], data :  data};

                $scope.projectInfoList.push(listInput); 

                if(index == $scope.projectList.length - 1){
                    $scope.$apply();
                }
            });
        };
    }

这里有 2 个错误。

  1. 它只将数据添加到最后一个索引。
  2. 当我请求另一个月或年的数据时,它不会立即刷新数据

我一直在寻找 的解决方案,但我不确定如何将它与 'projectService.getProject(..)'

的可变数量的功能一起使用

您为函数 success 提供的匿名回调使用变量 index 的闭包。

但是,您的匿名回调将异步调用(当调用完成时)。所以当 index 将是数组的最后一个索引时调用它(所以这里 $scope.projectList.length - 1)。

为避免这种情况,您可以使用以下模式:

for(var index=0; index < $scope.projectList.length; index++){
    (function (index) {
        projectService.getProject($scope.model.year, $scope.model.month, parseInt($scope.projectList[index]) ).success(function(data){

            var listInput = { projectID : $scope.projectList[index], data :  data};

            $scope.projectInfoList.push(listInput); 

            if(index == $scope.projectList.length - 1){
                $scope.$apply();
            }
        });
    })(index)
}

你的第二个错误可能是因为你在函数中用 $scope.projectInfoList = [];.

更改了数组 projectInfoList 的引用

查看此 post 以获取有关最后一个问题的更多详细信息: