无法更改 Ag-grid 中的图标

Question

我在 angular 中使用 ag-grid table 并尝试更改其中的 aerrow 图标但它不起作用我使用了下面的代码但它不起作用

我正在更改列定义内的图标

public columnDefs = [
    { 
      headerName: "Group",
      field: 'group',
      cellRenderer: 'agGroupCellRenderer',
      icons: {
          groupContracted: '<img src="https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/javascript-grid-icons/minus.png" style="height: 12px; width: 12px;padding-right: 2px"/>',
        },
 
    },
    { headerName: "Year", field: "year" , sortable: true},
    { headerName: "Country", field: "country" }
  ];

但这并没有反映出来。我指的是以下文档 link

https://www.ag-grid.com/javascript-grid-icons/

下面是 stackblitz link https://stackblitz.com/edit/angular-ag-grid-tree-data-bbbcyb

Answer 1

尝试下载 img 文件并将其用作本地资产

Answer 2

将图标对象赋予 gridOptions 它将起作用

public gridOptions = {
    rowSelection: 'multiple',
    groupSelectsChildren: true,
    groupSelectsFiltered: true,
    suppressAggFuncInHeader: true,
    suppressRowClickSelection: true,
     autoGroupColumnDef: {headerName: "Athlete", field: "athlete", width: 200,
        cellRenderer:'agGroupCellRenderer'
    },
    getNodeChildDetails: function getNodeChildDetails(rowItem) {
      if (rowItem.participants) {
        return {
          group: true,
          // open C be default
          expanded: rowItem.group === 'Group C',
          // provide ag-Grid with the children of this group
          children: rowItem.participants,
          // the key is used by the default group cellRenderer
          key: rowItem.group
        };
      } else {
        return null;
      }
    },
    onGridReady: function (params) {
    },
    icons: {
      groupContracted: '<img src="https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/javascript-grid-icons/minus.png" style="height: 12px; width: 12px;padding-right: 2px"/>',
    }
  };

无法更改 Ag-grid 中的图标

Not able to change icon in Ag-grid

ag-grid

angular