L'échange de données sur ui-grid prend beaucoup de temps

Question

J'ai une grille et selon certaines conditions, je dois changer les données qui viennent du back-end. La première fois que je charge des données à l'arrière, la grille fonctionne bien. Lorsque je commence à changer de données, la grille affiche bien les nouvelles données mais reste figée pendant un certain temps. Je remarque que cette période est aléatoire et est souvent d'environ 3 secondes ou plus.

J'ai essayé d'affecter des données au réseau par le biais de différentes façons, mais le résultat est le même:

1)

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

Et puis

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

2) Je cherche pour affecter les données directement à la grille

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

3) Je combine les ci-dessus avec Approches

a) $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW)

b) $scope.gridApi.core.refreshRows()

mais le problème persiste. J'utilise angulaire-ui-grille 4.0.1

Toute idée sera appréciée.

Answer 1

Une autre option:

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

devrait donner la grille le peu de temps dont il a besoin de respirer!

Mise à jour:

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>