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テンプレートそのものの微調整によって行うことができます。

<p-column>内<template>のメイクを使用し、データが負の値であるときにクラス.ERRORをバインドします。これを試してみて、更新してください

.error { 
    color: red; 
} 

：あなたのCSSで今

<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> 

：

は、テンプレートを更新しました。