javascript - 带有AngularJS的Ag-grid- header 宽度与数据列不对齐

[更新]如果有人使my snippet工作并且标题和数据列对齐，我将再增加200点(总计300点)。

这是我第一次尝试ag-grid。我这样分配网格标题:

var stationAnalyticsColumnDefs = [
    {headerName: "Station #", field: "station_id",   width: 150, sort: 'asc'},
    {headerName: "Station name",   field: "station_name", width: 150, sort: 'desc'},
    {headerName: "Total visitors",   field: "total_visit_count", width: 150, sort: 'desc'},
    {headerName: "Busiest day (visitors)",   valueGetter: BusiestDayValueGetter, width: 150, comparator: BusiestDayComparator},
];

我正在通过AJAX提取数据，因此当我的$http.get返回成功并根据文档进行编码时，我应该能够

$scope.stationAnalyticsGridOptions.api.refreshView();

要么

$scope.stationAnalyticsGridOptions.api.refreshRows(data);

但这些似乎都不起作用(未显示数据)，因此我使用

$scope.stationAnalyticsGridOptions.api.setRowData(data);

数据显示还不错。

我的问题是标题与数据不对齐。我怎么做？我还希望在拖动标题以调整网格列时调整网格列的大小。



[更新]仍在处理Plunk。谁能看到这是怎么回事？

View

<div ag-grid="stationAnalyticsGridOptions"
     class="ag-fresh ag-basic"
     style="height:400px; width:80%">

控制者

var stationAnalyticsColumnDefs = [
   {headerName: "Station #", field: "station_id",   width: 150, sort: 'asc'},
   {headerName: "Station name",   field: "station_name", width: 150, sort: 'desc'},
   {headerName: "Total visitors",   field: "total_visit_count", width: 150, sort: 'desc'},
   {headerName: "Busiest day (visitors)",   valueGetter: BusiestDayValueGetter, width: 150, comparator: BusiestDayComparator},
];

$scope.stationAnalyticsGridOptions = {
    columnDefs: stationAnalyticsColumnDefs,
    rowData: $scope.eventStationsAnalyticData,
    enableColResize: true,
    enableSorting: true,
    enableFilter: true,
};

[更新]我试图创建一个有效的小提琴，以重现该问题，但是失败了。该表甚至不显示。您可以在https://jsfiddle.net/mawg/9ex225ye/4/找到小提琴

有人可以使用标题宽度和数据列宽度对齐的格式吗？

请 fork 我的小提琴，而不是从头开始，并保留变量名，等等。

最佳答案

尝试设置包括gridOptions的angularComileHeader: true，以确保您的 header 可以正确的方式与AngularJS一起使用。请检查此runnable plnkr并将其与您的解决方案进行比较。还要确保您使用的是最新版本的ag-grid。

$scope.gridOptions = {
  columnDefs: columnDefs,
  rowData: $scope.rowData,
  angularCompileHeaders: true,
  enableColResize: true,
  enableSorting: true,
  enableFilter: true
};

关于javascript - 带有AngularJS的Ag-grid- header 宽度与数据列不对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42599756/