PrimeNG 表 - 将类应用于行但背景颜色不起作用

Question

我正在使用 PrimeNG 表

<p-table>

。 它具有虚拟滚动和可选择的行。 我想根据数据中的某个整数值使行背景颜色变量。

使用此建议：https://www.geeksforgeeks.org/angular-primeng-table-styling-certain-rows-and-columns/。 我添加了

[ngClass] = 'myRowClass(row.version)'

：

<ng-template pTemplate="body" let-row>
  <tr 
    style="height:53px;" 
    [ngClass] = 'myRowClass(row.version)'
    [pSelectableRow]="row" 
    (selectstart)="selectRow($event)"
    >

哪里

public myRowClass(v)
{
  return v<3 ? 'greenBkg' : v<5 ? 'yellowBkg' : 'redBkg';
}

和

::ng-deep .redBkg > tr {
    background-color: 'red' !important;
}

tr.greenBkg{
    background-color: 'green' !important;
}

.yellowBkg{
    background-color: 'yellow' !important;
}

我确实看到所有 3 个类名都出现在生成的 HTML 中，但它们都不会导致颜色变化。这是我在“检查”中看到的示例：

<tr _ngcontent-nqh-c186="" class="p-element greenBkg p-selectable-row" style="height: 53px;" ng-reflect-ng-class="greenBkg" ng-reflect-data="[object Object]" tabindex="0"><td ....

以下是版本：

"dependencies": {
    "@angular/animations": "^15.2.4",
    "@angular/cdk": "^15.2.7",
    "@angular/common": "^15.2.4",
    "@angular/compiler": "^15.2.4",
    "@angular/core": "^15.2.4",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/forms": "^15.2.4",
    "@angular/platform-browser": "^15.2.4",
    "@angular/platform-browser-dynamic": "^15.2.4",
    "@angular/router": "^15.2.4",
    "primeng": "^15.4.1",

Answer 1

从

background-color

语法来看，应该是：

background-color: <color>  

删除引号。并且您的红色背景将无法正常运行。

.redBkg > tr

当前的样式规则会将红色背景应用于父元素为“redBkg”类的

<tr>

元素。

你的 CSS 应该是：

.redBkg {
  background-color: red !important;
}

.greenBkg {
  background-color: green !important;
}

.yellowBkg {
  background-color: yellow !important;
}

演示@StackBlitz