为什么标题单元格与正文单元格不对齐?

时间:2021-04-03 06:37:09

标签: css angular ag-grid ag-grid-angular

<块引用>

rowData: any = [];rowModelType = 'serverSide'; defaultColDef: any = { width: 50, sortable: true, resizable: true, }; columnDefs: any = [];rowSelection = 'single';公共getRowHeight:任何; 私有参数RefreshAgGrid:任何;私有 gridColumnApi: 任何; 私有 gridApi:任何; 构造函数(){ this.gridOption() } gridOption() { this.columnDefs = [ { headerName: 'نوع ارز',field: 'currencyCode',width: 200, },{ headerName: 'خرید',field: 'buyEts', width: 200, }, { headerName: 'انتخاب', 字段: 'sellEts2', 宽度: 200, }, { headerName: 'خرید', 字段: 'buyEts3', 宽度: 200, }, { headerName: 'انتخاب', 字段: 'sellEts',width: 200, }, { headerName: 'خرید اضافه', 字段: 'buyExternalCheque', 宽度: 200 } ,{ headerName: 'مبلغ', field: 'buyMoney', width: 200,}, ]; } onGridReady(参数:任何){ const $this = this; 如果(参数){ this.gridApi = params.api;this.gridColumnApi = params.columnApi; this.paramRefreshAgGrid = params; } const 数据源 = { getRows(参数:任何){ 常量数据:任何= [ {currencyCode:'Ford2',buyEts:'蒙迪欧',sellEts:32000,sellEts2:32000,sellEts3:32000,buyExternalCheque:500, 买钱:100000}, ] params.successCallback(data, data.total); $this.gridApi.sizeColumnsToFit(); } }; 如果(参数){ params.api.setServerSideDatasource(datasource); } }

<ag-grid-angular
  style="width: 100%;"
  [ngStyle]="{'height': '50vh'  }"
  id="logGrid"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [enableRtl]="true"
  [rowModelType]="rowModelType"
  [animateRows]="false"
  [rowSelection]="rowSelection"
  [debug]="true"
  [rowData]="rowData"
  [getRowHeight]="getRowHeight"
  (gridReady)="onGridReady($event)"
  [paginationPageSize]="100"
  [suppressDragLeaveHidesColumns]="true"
</ag-grid-angular>

我使用 "ag-grid-angular": "20.2.0", 在 Angular 11 中滚动标题时标题单元格未与正文单元格对齐。enter image description here

您有什么解决方案来修复此错误? 谢谢!!

1 个答案:

答案 0 :(得分:1)

ag-grid-angular 的 20.2.0 版本已有 2 年历史。尝试安装最新版本的 ag-grid-communityag-grid-angular - 之后我也会删除 node_modules 文件夹并清理 npm install

这可能会解决问题(或至少缩小范围)

注意您应该在问题中突出显示该问题仅发生在 Chrome 中