使用AngularJS加载大型数据集

一尘不染

使用AngularJS加载大型数据集

angularjs

我正在尝试设计一种无需分页就可以将大量数据（最多1000行）加载到页面中的方法。这方面的第一个障碍是以并行咬大小块查询数据库，这是我在如何使用AngularJS进行顺序RestWeb服务调用的解决方案的帮助下完成的。

但是，我在实施时遇到了两个问题：

每个返回的对象都将传递到一个数组中，然后该数组本身将作为Angular用来绑定的数组返回。即[[{{键：值，键：值，键：值}，{键：值，键：值，键：值}]，[{键：值，键：值，键：值}，{键：值，键：值，键：值}]]因此，我不能使用ng-repeat =“数据中的项目”，因为数据是一个数组数组。执行“数据中的项目[0]”确实可以使项目可用。串联似乎是答案，但我还无法找出使之起作用的方法。
我正在对数据库发出多个请求，每个请求都正确返回，但是在所有请求完成之前页面不会呈现-这完全抵消了首先执行多个请求的意义。

因此，查看我的代码，如何重新编写代码以解决这两个问题？以便将数据作为一个数组返回，并在每次查询完成时呈现数据？

app.factory('ScanService', function($http, $q) {
  function fetchOne(stepCount) {
    return $http({
      method: 'GET',
      url: '/index.php/scans',
      params: {step:stepCount}
    })
    .then(function onSuccess(response) {
      return response.data;
    }
    return {
      fetchAll: function(steps) {
        var scans = [];
        for (var i = 1; i <= steps; i++) {
          scans.push(fetchOne(i));
        }
        return $q.all(scans);
      }
    };
});

app.controller.ScanCtrl = function($scope, $q, ScanService) {
  $scope.scans = ScanService.fetchAll(10);
};

跟进

我应该补充一点，我确实设法根据下面的解决方案和angular.forEach（）使此工作正常进行。不能建议任何使用“大数据”的人走这条路。在大约1000行的浏览器中，浏览器不知所措，并且开始显着减速。尝试使用angular.filter进行过滤也经历了明显的延迟，直到缩小结果范围为止。另一方面，几百行的表现很好，并允许本机过滤-这是我实现的主要目标。

阅读 201

2020-07-04

共1个答案

一尘不染

如果要单独对待每个承诺（单独显示每个承诺），则不能真正地将所有的承诺合计为q（使它们成为成功或失败的一个大承诺）。

我会尽快将您得到的内容重新纳入范围。下面是一个示例：

    function MyCtrl($scope, $timeout, $q) {
        var fetchOne = function() {
            var deferred = $q.defer();
            $timeout(function() {
                deferred.resolve([random(), random() + 100, random() + 200]);
            }, random() * 5000);
            return deferred.promise;
        };

        $scope.scans = [];
        for (var i = 0; i < 2; i++) {
            fetchOne().then(function(items) {
                angular.forEach(items, function(item) {
                    $scope.scans.push(item);
                });
            });
        };
    }

这是一个显示实际效果的小提琴：http :
//jsfiddle.net/wWcvx/1/

这里存在一个问题，即项目的顺序基于退货的时间，而不是原始的请求顺序。我让你自己弄清楚那个。

2020-07-04