angular4自定义单元格样式的ag-grid

Question

美好的一天！ 我正在寻找角度为4的网格组件...经过一些搜索后，我发现了ag-grid。 在我创建示例应用程序之后，我在执行以下任务时遇到了一些问题： - 在单元格中，用户可以从select（下拉列表）中选择值，并且此单元格必须根据所选值更改样式。 我用网格创建组件，组件有自己的html和css文件。 在css文件中，我为每个单元格状态放置了类：

.entry-option1 {
    background-color: transparent;
}
.entry-option2 {
    background-color: #32CD32;
}

在列i的组件中定义：

this.columnDefs.push(
{ 
    headerName: 'Options',
    field: 'select',
    editable: true,
    cellEditor: 'select', 
    cellEditorParams: {
        values:[1, 2]
    }, 
    cellClass: (params:any) => {
        let className = this.getClassName(parseInt(params.value));
        return className;
    }
});

这个getClassName：

private getClassForCalendarEntry(value: number): string {
switch (type) {
    case 1:
        return 'entry-option1';

    case 2:
        return 'entry-option2';
    }

    return "";
}

但这不起作用：更改后的值正确的类名应用于相应的DOM元素，但是组件css注入带有属性过滤的结果html（即.entry-option1 [_ng-component1]）但是alement没有这个属性，所以样式不适用...

我不想要提取样式到全球风格，但我不能看到解决这个问题的另一种方法......任何人都可以帮助我吗？

Answer 1

我有同样的问题， ::ng-deep为我工作。 需要访问组件中不存在或在不同组件中创建的DOM元素。

::ng-deep .entry-option1 {
    background-color: transparent;
}