如何更改 agGrid 中的排序图标，如 angular 中的 fontawesome 图标中的角度箭头图标？

【问题标题】：How to change the sort icon in agGrid like angle arrow icon in fontawesome icons in angular?如何更改 agGrid 中的排序图标，如 angular 中的 fontawesome 图标中的角度箭头图标？
【发布时间】：2019-07-04 23:29:57
【问题描述】：

this.columnDefs = [
  {
    headerName: '',
    field: 'id',
    maxWidth: 50,
    cellRenderer: 'selectRenderer'
  },
  {
    headerName: 'Project Code',
    field: 'projectCode',
    minWidth: 75,
    sortable: true
  },
  {
    headerName: 'Project/Sub-Project Name',
    field: 'projectName',
    minWidth: 300,
    sortable: true
  },
  {
    headerName: 'Start Date',
    field: 'startDate',
    minWidth: 100,
    sortable: true
  },
  { headerName: 'End Date', field: 'endDate', minWidth: 95 },
  {
    headerName: 'Current Budget',
    field: 'currentBudget',
    minWidth: 130,
    cellRenderer: function(param) {
      return `${param.data.currentBudget} USD`;
    }
  },
  { headerName: '', field: '', cellRenderer: 'editRenderer', maxWidth: 100 }
];

这是我对表格的列定义。我在 neccassary 列中使用了 sortable 作为 true 。我需要更改表格中排序的默认图标类型。

【问题讨论】：

标签： angular angular6 ag-grid

【解决方案1】：

您可以使用列定义的图标属性设置自定义图标以在列级别上进行排序，或者使用 gridOptions 的图标属性设置应用于所有列。如果在网格选项和列定义中都定义了，则将使用列定义。

  this.icons = {
    sortAscending: '<i class="fa fa-arrow-down "/>',
    sortDescending: '<i class="fa fa-arrow-up"/>',
  };

像这样在ag-grid-angular标签内的模板中添加[icons]="icons"

  <ag-grid-angular
    [columnDefs]="columnDefs"
    [rowData]="rowData"
    [icons]="icons"
  </ag-grid-angular>

您还必须导入 fontawesome css 文件才能使其工作。

查看此链接以获取文档 - https://www.ag-grid.com/javascript-grid-icons/

【讨论】：

React 怎么样。这个文档也很混乱，我想做的就是在其中一个标题中显示一个图标，不应该这么复杂。