如何在表格中设置行的样式？

Question

我在表格中有一个小问题。基本上我的表有4行。

a）如果列标题5 下的值小于0，则整个行必须为红色

b）如果列标题5 下的值等于17，则整个行需要为橙色。

c）任何其他行不应该有任何颜色。

我的大部分都在工作。 我的问题是：

  

如果一行没有任何颜色，我仍然想要检查图标   绿色

这是我的工作代码：

PLUNKER

<p-panel  class="a-panel-checkIn" header='Compliance Tracking' [toggleable]="true" [collapsed]="isPanelCollapsed" [style]="{ height: '100%' }">
  <p-table [value]="complianceTracking" [columns]="cols" selectionMode="single">
  <ng-template pTemplate="header" let-columns>
  <tr>
    <th *ngFor="let col of columns">
      {{col.header}}
    </th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
  <tr [ngClass]="rowData.field5 < 0 ? 'a-danger-row' : (rowData.field5 === 17) ? 'a-yellow-row' : 'a-green-row'">
    <td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? 'a-check-icon' : ''">
      {{rowData[col.field]}}
    </td>
  </tr>
  </ng-template>
  </p-table>
</p-panel>

Answer 1

您可以在ng-template中替换第二个app.template.html的以下代码：

<ng-template pTemplate="body" let-rowData let-columns="columns">
  <tr [ngClass]="rowData.field5 < 0 ? 'a-danger-row' : (rowData.field5 === 17) ? 'a-yellow-row' : ''">
    <!-- <td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? 'a-check-icon' : ''"> -->
    <td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? ((rowData.field5 > 0 && rowData.field5 !== 17) ? 'a-check-icon a-green-check' : 'a-check-icon' ) : ''">
      {{rowData[col.field]}}
    </td>
  </tr>
</ng-template>

在styles.css中，按照以下步骤创建新的css规则：

.a-green-check {
   color: #A8CF45;
}

以下是Plunkr

希望这是你想要实现的目标。

Answer 2

更新您的模板，如下所示：

<ng-template pTemplate="body" let-rowData let-columns="columns">
  <tr [ngClass]="rowData.field5 < 0 ? 'a-danger-row' : (rowData.field5 === 17) ? 'a-yellow-row' : ''">
    <td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? 'a-check-icon' : ''" class="{{col.field=='field6' && rowData.field5!==17 && rowData.field5>0  ? 'a-green-row':''}}">
      {{rowData[col.field]}}
    </td>
  </tr>
</ng-template>

输出：