带有AngularJS的Ag网格 - 标题宽度未与数据列对齐

Question

[更新]如果有人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。任何人都可以看出这有什么问题吗？

视图

<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/

找到小提琴

任何人都可以使用标题宽度和数据列宽度对齐吗？

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

Answer 1

尝试设置包含gridOptions的{​​{1}}以确保您的标题以正确的方式与angularComileHeader: true一起使用。请检查此runnable plnkr并将其与您的解决方案进行比较。另外，请确保使用最新版本的AngularJS。

ag-grid