除非调整浏览器窗口大小，否则 Angular ui 网格不会显示内容 [英] Angular ui grid does not show content unless browser window is resized

问题描述

我使用 angularjs 1.5.0 和 angular ui grid 3.1.1.当我在控制器主体中分配 gridOptions(传递给 grid 指令)对象时，如下所示:

$scope.gridOptions = {数据:[{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"} ] ;});

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

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

2. 如何手动更新角度 ui 网格表?我已经尝试过的事情:

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

解决方案

这段代码有两个问题，但是浏览器窗口resize后才显示表格内容的原因是缺少定义宽度和高度的css类，基本(工作)示例:

 .grid {宽度:500px；高度:250px；}

在 HTML 中:

其他问题(此线程中的其他人提到:

• 分配 gridOption 字段(data 和 columnDefs)必须在 $timeout 内完成，另外在此之前需要清除 data 和 columnDefs.否则它的变化可能不会变得可见，表格内容和标题将保持不变(ui-grid 中的已知错误，如@maurycy 所述)

I am using angularjs 1.5.0 with angular ui grid 3.1.1. When I assign gridOptions (passed to the grid directive) object in controller body like this:

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

HTML:

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

It displays the table as expected. But when I try to change data inside $scope.on:

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

It renders only frame of the table, when including pagination it will also render pagination related controls - but not the content itself. Content (the rows and column headers) appear only after I resize my browser window.

1. Why doesn't angular-ui grid update table content when the data changes inside $scope.on?

2. How can I manually update the angular ui grid table? Things I already tried:

   $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
   

解决方案

There are a two issues with this code, but the reason for the table contents showing only after browser window resize is lack of css class defining width and height, basic (working) example:

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

and in HTML:

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

The Other issue (mentioned by other people in this thread:

• assigning gridOption fields (data but also columnDefs) must be done inside $timeout, additionally both data and columnDefs need to be cleared before that. Otherwise it change might not become visible and table contents and headers will remain unchanged (known bug in ui-grid as @maurycy mentioned)

这篇关于除非调整浏览器窗口大小，否则 Angular ui 网格不会显示内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！