AG-Grid 不会填充在函数中

ag-grid is not populating inside a function?

本文关键字:函数 填充 AG-Grid      更新时间:2023-09-26

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

下面是一个 aggrid 的样本,它工作正常,一切正常。但是,当我在一个将在按钮单击时调用的函数中移动我的网格选项时,我收到警告 - 找不到 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
    };

}

如果网格没有支持你的网格选项,这肯定意味着你的 html 模板中有拼写错误

检查它必须具有的 hml 模板

ag-grid="gridOptions2"

注意:如果你使用控制器和控制器的方式,你必须在这个而不是$scope上绑定变量。

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

这是角度网格绑定问题。 检查范围变量网格选项。

网格选项功能:

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 角度网格.js:1 警告 - 找不到角度网格的网格选项。请确保属性角度网格指向作用域上的有效对象。

我认为这应该消除疑虑。

@ranjeet8082 您可以打开网格 在单击按钮时,您可以在函数的侧面写"gridOptions"。所以你也可以加载 HTML 当时使用 ng-if 首先你可以隐藏 html 单击,只有你可以加载 html,然后在选项中也加载点击功能,这样你就不会收到任何错误。你可以用这个弹跳机检查。

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

链接