javascript - Angular4自定义单元格样式中的ag-grid

Question

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

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

在列的组件中我放置了定义:

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 通过属性过滤注入(inject)到结果 html 中(即 .entry-option1[_ng-component1])，但 alement 没有此属性，所以样式不适用...

我不想将样式提取为全局样式，但我找不到另一种方法来解决这个问题...任何人都可以帮助我吗？

Answer 1

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

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