Angular Grid（ag-grid）显示/隐藏不起作用

Posted 2023-02-19

【中文标题】Angular Grid（ag-grid）显示/隐藏不起作用

【英文标题】：Angular Grid (ag-grid) show/hide not working

【发布时间】：2015-09-23 16:25:46

【问题描述】：

我正在使用 Angular Grid (ag-grid) 来显示数据。在我的 gridOptions 中，我使用cellClicked 在单击其中一列时调用一个函数。该函数SeeDetails 只是将作用域上的变量设置为 true 或 false 以隐藏/显示包含 ag-grid 的 div。由于某种原因它不起作用。

为了测试，我在ag-grid 之外创建了一个按钮，它调用相同的SeeDetails 函数。这样做时，div 可以很好地隐藏网格（在我的 html 中，我有 ng-show="vm.ShowDetails == 'false'" 来显示隐藏网格）。

我认为这与范围有关，只是不确定是什么。有什么想法吗？

HTML：

<div ng-show="vm.ShowDetails == 'false'">
    <div style="height: 800px" ag-grid="vm.gridOptions" class="ag-fresh"></div>
</div>

视图模型：

var vm = this;
vm.ShowDetails = 'false';

vm.gridOptions = 
    rowData: null,
    enableColResize: true,
    enableSorting: true,
    enableFilter:  true,
    columnDefs: [
        
            field: 'LogID',
            headerName: 'Log ID a',
            width: 100
        , 
            headerName: 'Log ID',
            name: 'Log ID',
            cellClicked: function (params) 
                vm.SeeDetails(params.data.LogID);
            ,
            cellRenderer: function (params) 
                return '<a>' + params.data.LogID + '</a>';
            
        , 
            headerName: 'Date Of Error',
            name: 'Col Name',
            cellRenderer: function (params) 
                return moment(params.data.TimeOfError).format('DD/MMM/YYYY')
                //return params.data.TimeOfError;
            
        
    ]
;

vm.SeeDetails = function SeeDetails(LogID) 
    if (vm.ShowDetails == 'false') 
        vm.ShowDetails = 'true';
     else 
        vm.ShowDetails = 'false';
    

【参考方案1】：

ag-grid 在此特定回调中不会调用摘要循环。

要解决此问题，只需确保启动摘要循环即可。

这样做：

vm.SeeDetails = function SeeDetails(LogID) 
    if (vm.ShowDetails == 'false') 
        vm.ShowDetails = 'true';
     else 
        vm.ShowDetails = 'false';
    
    setTimeout( function()  $scope.$apply(); , 0 );

超时是作为保护完成的，以确保摘要循环尚未运行。需要调用本机超时而不是使用角度超时服务，因为角度超时将保证摘要正在运行（您不想要）。

【参考方案2】：

$timeout(function() 
     $scope.gridOptions.api.checkGridSize()
);

为我工作。