Angular ui 网格不显示内容，除非调整浏览器 window 的大小

Question

我正在使用 angularjs 1.5.0 和 angular ui grid 3.1.1。当我在控制器 body 中分配 gridOptions（传递给 grid 指令）object 时，如下所示：

$scope.gridOptions = {
      data: [{"mock2": 1, "mock1": 2}, {"mock2": 10, "mock1": 22} ]
    };

HTML:

    <div ui-grid="gridOptions"></div>

它按预期显示 table。但是当我尝试更改 $scope.on 中的数据时：

$scope.$on('update', function (event, passedFromBroadcast) {
      $scope.gridOptions.data= [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;
    });

它仅呈现 table 的框架，当包含分页时，它还会呈现与分页相关的控件 - 但不呈现内容本身。内容（行和列 headers）仅在我调整浏览器 window.

后显示

为什么$scope.on中的数据发生变化时angular-ui网格不更新table内容？

如何手动更新 angular ui 网格 table? 我已经尝试过的事情：

$scope.gridApi.core.handleWindowResize(); // Does not work
$scope.gridApi.core.refresh(); // Does not work
$timeout(function(){$scope.gridOptions.data= [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;}) // Does not work

Answer 1

更新后 gridOptions.data 长度不变是一个已知错误，建议的解决方案是清除数据并使用 $timeout 刷新它

$scope.$on('update', function (event, passedFromBroadcast) {
  $scope.gridOptions.data = null
  $timeout(function(){
    $scope.gridOptions.data = [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;
  });
});

Answer 2

您可以尝试以下方法：

$scope.$on('update', function (event, passedFromBroadcast) {
  $scope.gridOptions.data.length = 0;
  $timeout(function(){
    $scope.gridOptions.data = [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;
  });
});

希望对您有所帮助！

Answer 3

在 $interval 上放置 window 调整大小处理程序过去在 gridOptions.onRegisterApi 方法中对我有用：

var gridResizeHandlerInterval; 

$scope.gridOptions = {
  ..., // etc.
  onRegisterApi: function(gridApi) {
    ctrl.gridApi = gridApi;

    gridResizeHandlerInterval = $interval( function() {
      $scope.gridApi.core.handleWindowResize();
    }, 10, 500); 
  }
};

然后当你的控制器被销毁时，确保你整理并取消间隔：

$scope.$on('$destroy', function() {
  $interval.cancel(gridResizeHandlerInterval);
});

希望这对你有帮助...

Answer 4

此代码有两个问题，但 table 内容仅在浏览器 window 调整大小后显示的原因是缺少 css class 定义宽度和高度，基本（工作）示例：

    .grid {
      width: 500px;
      height: 250px;
     }

并在 HTML 中：

    <div class="grid" ui-grid="gridOptions"></div>

其他问题（此线程中其他人提到的：

分配 gridOption 字段（数据以及 columnDefs）必须在 $timeout 内完成，此外数据和 columnDefs 都需要在此之前清除。否则它的变化可能不可见并且 table 内容和 headers 将保持不变（@maurycy 提到的 ui-grid 中的已知错误）

Angular ui 网格不显示内容，除非调整浏览器 window 的大小

Angular ui grid does not show content unless browser window is resized

javascript

angularjs

angular-ui-grid