除非调整浏览器窗口的大小，否则 Angular ui 网格不会显示内容答案

【问题标题】：Angular ui grid does not show content unless browser window is resized除非调整浏览器窗口的大小，否则 Angular ui 网格不会显示内容
【发布时间】：2016-05-27 13:42:17
【问题描述】：

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

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

HTML：

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

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

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

它只呈现表格的框架，当包含分页时，它也会呈现分页相关的控件 - 但不呈现内容本身。内容（行和列标题）仅在我调整浏览器窗口大小后才会出现。

为什么 $scope.on 内部数据发生变化时，angular-ui grid 不更新表格内容？

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

$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

【问题讨论】：

hese 是交换数据的example，解析后的issue。对你有用吗？
嗨，尹，感谢您的链接。问题只是缺少 CSS 宽度和高度属性。还有其他问题 - 请参阅已接受的答案。

标签： javascript angularjs angular-ui-grid

【解决方案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"} ] ;
  });
});

【讨论】：

感谢您的回答-恐怕没有解决，我仍然需要调整浏览器窗口的大小才能使表格出现。
你用过角度$timeout吗？
我使用了角度 $timeout。我发现问题出在哪里 - 我缺少指定宽度和高度的 CSS 类......这显然导致了这个刷新问题。 $timeout 很可能是另一个问题，但不是直接导致表格根本不显示的问题。

【解决方案2】：

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

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

在 HTML 中：

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

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

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

【讨论】：

【解决方案3】：

在$interval 上放置窗口调整大小处理程序过去在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);
});

希望对你有帮助...

【讨论】：

谢谢！即使它没有解决这个特定问题 - 它仍然非常有帮助。使用 gridApi.core.handleWindowResize() 很重要；在对宽度、columnDefs 或数据进行任何更新后的下一个摘要中。 timeout 可以用于那个 - 间隔也可以工作，但它已经足够了，一次调用 gridApi.core.handleWindowResize();足够了。

【解决方案4】：

您可以尝试以下方法：

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

希望这会有所帮助！

【讨论】：

谢谢，但它也没有改变任何东西 - 它仍然只有在手动调整浏览器大小后才会呈现。