Question

我正在尝试突出显示基于行的用户输入。我正在使用agular-grid-angular 19.1.2的Angular 5，使用gridOptions.getRowStyle设置样式会更改背景，但是如果可能的话，我宁愿使用scss类。通过（change）= setHighlight（）

在 html 文件中调用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不能将我的 highlighted 类正确地应用于rowNode。阅读（并尝试）this之后，我认为我的自定义scss类被ag类覆盖。使用 rowClassRules 时，会发生相同的问题。

问题如何正确设置我的自定义scss类，使Angular 5和ag-grid一起工作？

单步调试器显示该类已被拾取并附加到本机ag-grid类。

在 rowComp.js 中：

添加，开发工具的屏幕转储：

Answer 1

angular的ViewEncapsulation是罪魁祸首。

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

据我所知，这有两个选择。

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

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

我建议选择第二种方法。

this answers总结得很好。

另外：
.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之后的每个类都存在于同一元素上。
使用您编写的选择器，您将表示一个层次结构。

希望这会有所帮助

运行时突出显示行

1 个答案: