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

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/ 找到 Fiddle

谁能让它工作 - 标题宽度和数据列宽度对齐？

请 fork 我的 Fiddle，而不是从头开始，并保留变量名等

Answer 1

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

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