首页 文章

ag-grid无法使用角度1.x正常工作

提问于
浏览 次
2

我正在尝试使用ag-grid进行我的一个项目工作，并尝试使用webpack和Angular 1.6进行配置

我已将其配置如下

模块

var agGrid = require('ag-grid');
agGrid.initialiseAgGridWithAngular1(angular);

module.exports = angular.module('transModule', ['agGrid'])
.component('transComponent', transComponent)
.name;

控制器

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.gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData
    };

html

<div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>

但是当我使用i时，它显示如下
table view

然后我尝试添加样式表如下

要求（ 'AG-网格/ DIST /风格/ AG-grid.css'）;要求（ 'AG-网格/ DIST /风格/主题fresh.css'）;

然而，表格想要正确渲染，它将显示如下

enter image description here

有什么缺少的吗？如果你能给我一些单挑，我将不胜感激？

datatable webpack ag-grid angular1.6

1 回答

  • 0

    我在ag-grid的 package.json 中注意到它被引用为 main.js 作为入口点，我实际上发现整个 lib 文件夹内容已加载到Chrome DevTools的Source选项卡中 .

    这是由于我需要ag-grid的方式：

    var agGrid = require('ag-grid');
// get ag-Grid to create an Angular module and register the ag-Grid directive
agGrid.initialiseAgGridWithAngular1(angular);

var myApp = 'myApp';
module.exports = myApp;

angular
  .module(myApp, [
    'agGrid'
  ])

    即使"get-started" docs没有列出基于Webpack的解决方案，他们也会说要包含 dist/ag-grid.js 文件或其中一个minified / noStyle版本， so I changed the first line like this:

    var agGrid = require('ag-grid/dist/ag-grid.min.js');
    回复于

相关问题