AngularJs ：使用 ag-grid 的 $scope.grid.api.setRowData() 不起作用

Question

所以，我分叉了 this simple ag-grid demo Plunker and the forked version is here。

唯一的变化是旧代码为 ag-grid 静态分配行数据，而我的叉子尝试使用 API 动态分配 i。一世旧：

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

// let the grid know which columns and what data to use
var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    onGridReady: function () {
        gridOptions.api.sizeColumnsToFit();
    }
};

新：

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

  $scope.grid = {
    columnDefs: columnDefs,
    rowData: [],
    rowSelection: 'single'
  };

$scope.grid.api.setRowData(rowData);

无论是在我的 Plunker 中还是在 localhost 上进行尝试，ag-grid 都没有出现。

我做错了什么？

[更新] 我想在每次用户单击按钮时从服务器获取数据，而不仅仅是在网格准备好时，并使用它分配网格的 rowData api。

[Upperdate] 我刚刚在本地主机上注意到，虽然 $scope.gridOptions 已定义，但 $scope.gridOptions.api 未定义

Answer 1

设置后$scope不会立即有grid.api数据。您必须在 $scope.grid 的 onGridReady 函数中设置数据，如下所示。 https://plnkr.co/edit/qgPae2iGIl1A9i8O?preview

$scope.grid = {
  columnDefs: columnDefs,
  rowData: [],
  rowSelection: 'single',
  onGridReady: function() {
    $scope.grid.api.setRowData(rowData);
  }
};

Answer 2

好的，我解决了。这是静态和动态网格之间的区别。参见 this Plunker。

将HTML更改为<div id="myGrid" class="ag-fresh" style="height: 100px;"></div>（删除ag-grid="grid"），然后在控制器中：

var currentCandidatesGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(currentCandidatesGridDiv, $scope.grid);

$scope.grid.api.setRowData(rowData);

我要求这个帮助，并且对我自己有一点帮助 - 只是希望我也帮助了其他人:-)

AngularJs ：使用 ag-grid 的 $scope.grid.api.setRowData() 不起作用

AngularJs : using ag-grid's $scope.grid.api.setRowData() does not work

angularjs

ag-grid