uiグリッドのデータをスワップするには多くの時間がかかります

Question

グリッドが1つあり、条件によってはバックエンドからのデータを変更する必要があります。良い。データの切り替えを開始すると、グリッドは新しいデータをうまく表示しますが、しばらくの間は固定されたままです。私はこの時間がランダムで、しばしば約3秒またはそれ以上になることに気付きます。

Iは、様々な方法を介してグリッドにデータを割り当てることを試みたが、結果は同じである：

1）

$scope.gridOptions = { 
     //some options, 
     data: $scope.myData 
} 

そして

Demande.query({lb: condition}, function (result) { $timeout(function() {$scope.myData = result;},0);// I also try without $timeout }

2）私が試しますデータをグリッドに直接割り当てる

Demande.query({lb: condition}, function (result) { 
    $timeout(function() {$scope.gridOptions.data = result;},0); 
} 

3）Iは

A）$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW)

B）$scope.gridApi.core.refreshRows()

と上記approachsを組み合わせたが、問題は解決しません。私は、角度uiグリッドを使用しています4.0.1

任意のアイデアをいただければ幸いです。

Answer 1

別のオプション：

4）$scope.gridOptions.data = angular.copy($scope.myData);

がグリッドにそれが息を必要とする少し時間を与える必要があります！

更新：

angular.module('app', ['ui.grid']) 
 
    .controller('MainCtrl', ['$scope', function($scope) { 
 
    $scope.gridOptions = { 
 
     columnDefs: [] 
 
    } 
 
    for (var i = 0; i < 80; i++) { 
 
     $scope.gridOptions.columnDefs.push({ 
 
     name: 'C' + (i + 1), 
 
     enableColumnMenu: false 
 
     }); 
 
    } 
 
    var dataLoadCounter = 1; 
 
    $scope.switchData = function() { 
 
     $scope.gridOptions.data = []; 
 
     for (var i = 0; i < 1000; i++) { 
 
     $scope.gridOptions.data.push({}); 
 
     for (var j = 0; j < 80; j++) { 
 
      $scope.gridOptions.data[i]['C' + (j + 1)] = 'D' + dataLoadCounter + (j + 1); 
 
     } 
 
     } 
 
     dataLoadCounter++; 
 
    } 
 
    $scope.switchData(); 
 
    }]);

div[ui-grid] { 
 
    width: 4500px; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" /> 
 
<div ng-app="app" ng-controller="MainCtrl"> 
 
    <button ng-click="switchData()">Switch Data</button> 
 
    <div ui-grid="gridOptions"> 
 
    </div> 
 
</div>