Question

我已经在角度4中实现了bootstrap 4数据表4，但是无法更改或修改行颜色。行选择颜色和标题颜色。

我正在使用数据表4示例：https://github.com/afermon/angular-4-data-table-bootstrap-4

在本示例中演示了链接的演示1：https://afermon.github.io/angular-4-data-table-bootstrap-4-demo/

Answer 1

考虑到您下载的Git项目获取的 data-table-component-demo1.ts 中的以下代码段：

<data-table id="persons-grid"
        [header] = "false"
        [multiSelect] = "false"
        [substituteRows]="false"
        [indexColumn]="false"
        [items]="items"
        [itemCount]="itemCount"
        (reload)="reloadItems($event)"
        [pagination]="false"        
        (rowClick)="rowClick($event)"
        [rowColors] = "callBackForChangineRowColors" 
        >
        <data-table-column 
            [property]="'name'"
            [header]="'Name'"            
            [sortable]="true"
            [styleClass]="someExplicitClass"

在此，我们可以指定值＆some 39; someExplicitClass＆＃39;到[styleClass]如上所示，并在我们的 data-table-component-demo1.css 文件中定义someExplicitClass类，如下所示：

：host / deep / .someExplicitClass { 背景色：红色; }

但是，这适用于整个DataColumn，并且在粒度级别上无法控制。
我们可以使用＆＃39; data-table-component-demo1.ts＆＃39; 的rowClick（rowEvent）函数中可用的rowEvent变量间接应用背景颜色

单击该行，我将行的selected属性设置为true，从而触发table.component.ts文件的onRowSelectChanged函数

现在，我将[rowColors]值设置为＆＃34; callBackForChangineRowColors＆＃34;如上所示，在我的 data-table-component-demo1.component.ts 文件中进行以下更改：

rowClick(rowEvent) {
        console.log('Clicked: ' + rowEvent.row.item.name);
        rowEvent.row.selected = true;        
    }

    callBackForChangineRowColors(a,b,c)
    {
        if(b.selected)
        return 'blue';
    }

这样，我就可以明确地为所选行应用蓝色。

*遗憾的是，我无法找到任何解决方案，使用像[styleClass]这样的现成输入参数在粒度级别上应用任何其他样式，因为它在我们的column.component.ts中没有公开为@Input。如果有人有想法，请帮助我知道。

如何使用bootstrap 4数据表更改角度4中的背景，行，行选择和标题的颜色

1 个答案: