我正在尝试突出显示基于行的用户输入。我正在使用带有 ag-grid-angular 19.1.2 的 Angular 5。使用 gridOptions.getRowStyle 设置样式会更改背景，但如果可能的话，我宁愿使用 scss 类。html文件中通过(change)=setHighlight()调用函数setHighlight ()
setHighlight() {
const nextChronoId = this.getNextChronoDateId();
// this.highlightWithStyle(nextChronoId); // Working solution
this.highlightWithClass(nextChronoId);
const row = this.gridApi.getDisplayedRowAtIndex(nextChronoId);
this.gridApi.redrawRows({ rowNodes: [row]})
}
函数定义：
highlightWithStyle(id: number) {
this.gridApi.gridCore.gridOptions.getRowStyle = function(params) {
if (params.data.Id === id) {
return { background: 'green' }
}
}
}
highlightWithClass(id: number) {
this.gridApi.gridCore.gridOptions.getRowClass = function(params) {
if (params.data.Id === id) {
return 'highlighted'
}
}
}
我的 scss 课程：
/deep/ .ag-theme-balham .ag-row .ag-row-no-focus .ag-row-even .ag-row-level0 .ag-row-last, .highlighted{
background-color: green;
}
我的问题 使用 getRowClass 没有将我突出显示的类正确应用于 rowNode。在阅读（并尝试）后，我认为我的自定义 scss 类被 ag-classes 覆盖。使用rowClassRules时会出现同样的问题。
问题 如何让 Angular 5 和 ag-grid 一起正确设置我的自定义 scss 类？
使用调试器单步执行显示该类被拾取并附加到本机 ag-grid 类。
在rowComp.js 中：
此外，来自开发工具的屏幕转储：
