angular - 是否可以从 cellEditorParams 中检索值来为 ag-grid 中的列单元格着色？

Question

我正在尝试根据用户从单元格内的下拉菜单中选择的值为整个单元格着色。
这是我使用 cellEditorParams 定义下拉菜单并使用 cellStyle 为单元格着色的列定义。

{
  headerName: 'Year',
  field: 'year',
  width: 500,
  editable: true,
  cellEditor: 'agSelectCellEditor',
  cellEditorParams: {
    values: [
      '',
      '1 - Faible',
      '2 - Moyen ',
      '3 - Significatif',
      '4 - Elevé'
    ]
  },
  cellStyle(params) {
    const color = 'blue';
    return {
      'background-color': color
    };
  }
}

这给了我这个:

我想根据用户选择的值给单元格着色。
即:如果他选择:'1 - Faible'，单元格的颜色将变为:绿色
如果他选择:'2 - Moyen'，单元格的颜色将变为:橙色

等等等等。
所以我需要你的帮助:
1/如何获取用户选择的值？
2/如何在cellStyle中使用它？
3/我什至以正确的方式这样做吗？

Answer 1

Working sample

ag-grid 中有一个名为 cellClassRules 的内置选项.

 this.columnDefs = [
      {
        headerName: "Name",
        field: "name",
        width: 300,
        editable: true,
        cellEditor: "agRichSelectCellEditor",
        cellEditorParams: {
          values: [
            "Bob",
            "Harry",
            "Sally",
            "Mary",
            "John",
            "Jack",
            "Sue",
            "Sean",
            "Niall",
            "Albert",
            "Fred",
            "Jenny",
            "Larry"
          ]
        },
        cellClassRules: {
           // apply green to Bob
           'rag-green-outer': function(params) { return params.value === "Bob"},
           // apply amber Harry
           'rag-amber-outer': function(params) { return params.value === "Harry"},
           // apply red to Mary
           'rag-red-outer': function(params) { return params.value === "Mary"}
       },
      }
]

样式.css

.rag-green-outer {
  background-color: green;
}

.rag-amber-outer {
  background-color: yellow;
}

.rag-red-outer{ 
  background-color: red;
}

您也可以尝试 cellValueChanged 事件。那是另一种方法。