Я пытаюсь выделить строки на основе пользовательского ввода. Я использую Angular 5, с ag-grid-angular 19.1.2. Установка стиля с помощью gridOptions.getRowStyle меняет фон, но я бы предпочел использовать классы scss, если это возможно. Функция setHighlight () вызывается в файле html через (change) = 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-классами. Та же проблема возникает при использовании rowClassRules .
Вопрос * * 1023
Как я могу заставить Angular 5 и ag-grid работать вместе для правильной настройки моего собственного класса scss?
Пошаговое выполнение с отладчиком показывает, что класс выбран и добавлен к собственным классам ag-grid.
In rowComp.js : 
Дополнение, дамп экрана из инструментов разработчика:
