Ag 网格分页箭头未正确显示

Posted 2023-03-28

【中文标题】Ag 网格分页箭头未正确显示

【英文标题】：Ag grid pagination arrow is not showing properly

【发布时间】：2021-04-12 07:31:08

【问题描述】：

我最近将我的 Angular 项目从 v5 更新到 v11，还更新了 ag 网格。升级后，分页按钮显示为框而不是箭头符号。

<ag-grid-angular #agGrid
                 style="width: 1125px;min-height: 895px;border-radius: 16px;"
                 id="myGrid" 
                 class="ag-theme-balham"
                 [rowData]="rowData" 
                 [enableSorting]="true"
                 [enableFilter]="true" 
                 [enableColResize]="true"
                 [paginationPageSize]="paginationPageSize"
                 [columnDefs]="columnDefs"
                 [autoGroupColumnDef]="autoGroupColumnDef"
                 [icons]="icons"
                 [rowSelection]="rowSelection" 
                 (gridReady)="onGridReady($event)"
                 [paginationAutoPageSize]="true"
                 [pagination]="true" 
                 [suppressRowClickSelection]="true" 
                 [groupSelectsChildren]="true"
                 [debug]="true" 
                 [enableRangeSelection]="true" 
                 [defaultColDef]="defaultColDef"
                 [components]="components"
                 [frameworkComponents]="frameworkComponents"
                 [context]="context"
                 [headerHeight]="headerHeight" 
                 [gridOptions]="gridOptions" 
                 [suppressContextMenu]="true" 
                 [suppressMenuMainPanel]="true"
                 [suppressMenuColumnPanel]="true"
                 (cellClicked)='onCellClicked($event)'
                 [floatingFilter]="false"
                 [enableColResize]="true" 
                 [rowHeight]='32' >
</ag-grid-angular>

我的网格选项：

this.gridOptions =

  context: 
    componentParent: this
  ,
  enableColResize: true,
  enableSorting: true,
  // enable filtering 
  enableFilter: true,
  headerHeight:30,

Package.json： "ag-grid": "^18.1.2", “ag-grid-angular”：“^24.1.0”， "ag-grid-community": "^24.1.0", "ag-grid-enterprise": "^24.1.0", “角字体真棒”：“^3.1.2”

请告诉我哪里做错了，感谢任何帮助

【问题讨论】：

你能在 stackblitz.com 上复制这个问题吗

【参考方案1】：

我通过在 main style.css 中导入 css 文件得到了答案

@import "../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";

它开始正常工作了。

【参考方案2】：

我在 ag-grid react 中遇到了同样的问题。我发现问题是因为不透明。所以我覆盖了 CSS 属性。

.ag-theme-alpine .ag-paging-button 
  opacity: 1;