PrimeNG 数据 table 条件单元格格式

Question

我正在尝试根据单个单元格的值为该单元格的内容着色。例如，如果单元格值（数字）为负，则它应以红色显示单元格值（数字）。

这是我尝试过的：

<p-dataTable #dt [value]="DataList" [rows]="10" [paginator]="true" [pageLinks]="4" [rowsPerPageOptions]="[10,20,50,100]" scrollable="true" scrollHeight="400px">
<p-column [style]="{'width':'134px','text-align':'right'}" field="UnitChange" header="Units Change" [sortable]="true"> </p-column>
<p-column [style]="{'width':'134px','text-align':'right'}" field="UnitPercentChange" header="% Change (Units)" [sortable]="true"></p-column>

Answer 1

Primeng 2.0-RC.1 已发布，它对单元格编辑有一些更改和增强，也许升级您的版本会有所帮助。

Answer 2

@AnandCMS，

您不必使用 jQuery 来实现此目的。这可以通过对 PrimeNG 模板本身进行微调来完成。

在<p-column>中使用<template>，当数据为负值时绑定class .error。

已更新模板：

<p-column [style]="{'width':'134px','text-align':'right'}" field="UnitChange" header="Units Change" [sortable]="true">
   <template let-col let-data="rowData" pTemplate="body">
      <span [ngClass]="{'error': (data[col.field] < 0) }">{{ data[col.field] }}</span>
   </template>
</p-column>

现在在你的 css:

.error {
  color: red;
}

请尝试并更新。

PrimeNG 数据 table 条件单元格格式

PrimeNG data table conditional cell formatting

css

datatable

primeng

angular