在运行时突出显示行

Question

我正在尝试突出显示基于行的用户输入。我正在使用 Angular 5，以及 ag-grid-angular 19.1.2。使用 gridOptions.getRowStyle 设置样式会更改背景，但如果可能的话，我宁愿使用 scss classes。 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 class:

/deep/ .ag-theme-balham .ag-row .ag-row-no-focus .ag-row-even .ag-row-level0 .ag-row-last, .highlighted{
 background-color: green;
}

我的问题 使用 getRowClass 不会将我的 highlighted class 正确应用到 rowNode。在阅读（并尝试）之后，我认为我的自定义 scss class 被 ag-classes 覆盖了。使用 rowClassRules.

时也会出现同样的问题

问题我怎样才能让 Angular 5 和 ag-grid 一起工作来正确设置我的自定义 scss class？

使用调试器步进显示 class 已被拾取并附加到本机 ag-grid classes。

在rowComp.js中：

另外，来自开发工具的屏幕转储：

Answer 1

angular的ViewEncapsulation是这里的罪魁祸首。

首先请注意，所有阴影穿刺选择器，如 /deep/ 或 ::ng-deep 已经或将被弃用。

据我所知，这留下了两个选择。

使用ViewEncapsulation.None
将您的 highlighted class 添加到全局样式表

设置ViewEncapsulation.None带来了它自己可能的问题：所有组件样式都将成为全局可用样式。

我建议选择选项二。

总结得很好。

另外：
.ag-theme-balham .ag-row .ag-row-no-focus .ag-row-even .ag-row-level0 .ag-row-last
这个选择器永远不会匹配任何东西，你应该把它改成

.ag-theme-balham .ag-row.ag-row-no-focus.ag-row-even.ag-row-level0.ag-row-last

ag-theme-balham 之后的每个 class 都存在于同一元素上。
使用您编写的选择器，您将表示一个层次结构。

希望对您有所帮助

在运行时突出显示行

HIghlighting row during runtime

css

angular

ag-grid-angular