AngularJS/ng-grid - 使用拼接更新数组不会更新 UI

Question

我正在尝试使用数组splice更新ng-grid。 我这里有一个扑通。

"添加"按钮添加新行。"更新"按钮更新数组中的最后一项。

1. 选择一行并按更新按钮。什么也没发生。
2. 按添加按钮。现在UI使用新元素以及以前更新的元素进行更新。
3. 相同的行为一次又一次地重复。

我试过$scope.$apply.我得到：

"错误：$apply已在进行中">

我什至尝试将$scope.$apply块放入setTimeout呼叫中。又是同样的错误！

任何指示！

谢谢！

Answer 1

这是因为ng-grid中的数据$watcher(错误地(比较数据对象以供参考，而不是对象相等。您可以通过在数据$watch函数(第 3128 行(中将第三个参数设置为 true 来解决此问题：

$scope.$parent.$watch(options.data, dataWatcher, true);

普伦克

Answer 2

更新 (2015-04-10(

Angular 改进了他们的代码库 (1.4.0(，先尝试 $scope.$watchCollection 方法，看看它是否适合你。(链接(

答

如果您不想入侵第三方库，您可以使用以下命令在代码中添加黑客：

$scope.updateData = function() {
  var data = angular.copy($scope.myData);
  data.splice(data.length - 1, 1, {name: 'UPDATED', age: '4'})
  $scope.myData = data;
};

普伦克尔

正如@Stewie提到的，问题在于出于性能原因，ngGrid表面上比较数据对象，而在数组的情况下，这是通过引用。 ngGrid还通过数组长度进行比较，因此如果数组不更改其长度，则网格将不会更新。

此解决方案创建数组的副本(内存中的不同位置(，以便在 angularjs $watcher检查更改时，它将找到不同的对象并运行ngGrid更新回调。

注意：由于此解决方案在每次调用updateData时都会创建数据数组的副本，因此如果数据太大，可能会导致性能问题，而且Javascript也没有很好的垃圾收集。

旧的错误答案：

$timeout(angular.noop, 0);

这只是设置超时以在当前$scope.$apply()完成后触发。一种强制脏支票的方法。

Answer 3

>我正在使用 ui-grid v3.0.0(来自 2015 年 4 月的不稳定版本(。 我找到了这篇文章，并想向其他人展示在使用拼接从网格数据对象中删除一行后我是如何刷新网格的：

// Remove the row and refresh the grid.
$scope.myData.splice(rowIndex, 1);
$scope.gridApi.grid.refresh(true);

其中我的 gridApi 范围变量是用这个函数设置的：

$scope.gridOptions.onRegisterApi = function(gridApi){
    $scope.gridApi = gridApi;
}