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;
}

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

1 个答案: