Форматирование форматированной таблицы данных PrimeNG

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.

Сделать использование <template> в <p-column> и связывания класса .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; 
} 

Пожалуйста, попробуйте это и обновление.