ag-grid 没有填充在函数内部？

Posted 2023-03-28

【中文标题】ag-grid 没有填充在函数内部？

【英文标题】：ag-grid is not populating inside a function?

【发布时间】：2016-06-15 05:06:37

【问题描述】：

如果您发现一些愚蠢的东西，我是使用 agGrid 的新手，请原谅我。所以在此之前，我在 angularjs 上使用 Kendo Grid，但我们想切换到其他网格，所以我们现在正在尝试 agGrid。

下面是一个运行良好且一切正常的 agggrid 示例。但是，当我将网格选项移动到将在按钮单击时被调用的函数中时，我收到 警告 - 未找到 ag-Grid 的网格选项。请确保属性 ag-grid 指向范围内的有效对象。

我无法理解问题出在哪里，因为在这个函数内部，剑道网格选项工作正常，剑道网格正在被填充，但我不确定我在使用 agGrid 时做错了什么。

请帮助我。

function abc($rootScope,$scope, $state, $stateParams, $timeout, Upload, baseURL, $cookieStore, $log, errorCheckFactory) 
    var columnDefs = [
        headerName: "Make", field: "make",
        headerName: "Model", field: "model",
        headerName: "Price", field: "price"
    ];

    var rowData = [
        make: "Toyota", model: "Celica", price: 35000,
        make: "Ford", model: "Mondeo", price: 32000,
        make: "Porsche", model: "Boxter", price: 72000
    ];

    $scope.gridOptions2 = 
        columnDefs: columnDefs,
        rowData: rowData,
        enableFilter: true,
        enableColResize: true,
        enableSorting: true,
        groupHeaders: true,
        rowHeight: 22,
        //onModelUpdated: onModelUpdated,
        suppressRowClickSelection: true

    ;

【问题讨论】：

你找到解决办法了吗。我也面临同样的问题。

@ranjeet8082 按照我的回答检查您的绑定。

嗨，@ranjeet8082 你可以打开网格在点击按钮的时候，你可以在函数旁边写“gridOptions”。所以你也可以在那个时候使用ng加载html，如果首先你可以隐藏html点击你可以加载html然后在选项中也加载点击功能所以你不会得到任何错误。你可以用这个plunker检查。 plnkr.co/edit/247nVYxwNmOXdHvutJNm?p=preview

【参考方案1】：

如果网格没有找到你的 gridOptions 这肯定意味着你的 html 模板中有错字

检查你必须有的 hml 模板

ag-grid="gridOptions2"

注意：如果你使用带有 controllerAs 方式的控制器，你必须在 this 而不是 $scope 上绑定变量。

如果不是这个添加，您的 html 和您的路线/状态/导航的任何定义。

【参考方案2】：

这是角度网格绑定问题。检查您的范围变量 gridOptions。

网格选项功能：

var columnDefs = [
  displayName: "Make", field: "make",
  displayName: "Model", field: "model",
  displayName: "Price", field: "price",
  displayName: "Price2 ", field: "price2",
  displayName: "Test 4", field: "test4",
  displayName: "Test 5", field: "test5",
  displayName: "Test 6", field: "test6",
];

var rowData = [
  make: "Toyota Toyota Toyota Toyota Toyota", model: "Celica", price: 35000, price2: 145, "Test 4": "Test 4", "Test 5": "Test 5", "Test 6": "Test 6",
  make: "Acura", model: "Celica", price: 35000, price2: 145, "Test 4": "Test 4", "Test 5": "Test 5", "Test 6": "Test 6"
];

vm.gridOptions = 
  columnDefs: columnDefs,
  rowData: rowData  
;

工作计划：http://plnkr.co/edit/VRnwnXi6fzyaoJJ1YHOx?p=preview

Correct binding : <div angular-grid="main.gridOptions" class="ag-fresh" style="width: 100%"></div>

错误 Plnkr : http://plnkr.co/edit/zb4Vc2lw5VzRzYwsfhL7?p=preview

In-Correct Binding : <div angular-grid="main.gridOptions2" class="ag-fresh" style="width: 100%"></div>

我们将绑定从 gridOptions 更改为 gridOptions2，它向我们发出警告：VM769 angular-grid.js:1 WARNING - Angular Grid 的网格选项未找到。请确保属性 angular-grid 指向范围内的有效对象。

我认为这应该可以消除疑虑。

【参考方案3】：

@ranjeet8082 你可以打开网格在点击按钮的时候，你可以在函数旁边写“gridOptions”。因此，您也可以在那时使用 ng-if 首先加载 Html，您可以隐藏 html 点击，只有您可以加载 html，然后在选项中也加载点击功能，这样您就不会收到任何错误。你可以和这个 plunker 核对一下。

<div ng-if="vm.gridOptions"  angular-grid="vm.gridOptions" class="ag-fresh" style="width: 100%"></div>

link

【讨论】：

虽然理论上可以回答这个问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。请edit发帖并更新答案。