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