PrimeNG Datentabelle bedingte Zellenformatierung

Question

Ich versuche den Inhalt der einzelnen Zelle basierend auf dem Wert dieser Zelle zu färben. Wenn beispielsweise der Zellenwert (numerisch) negativ ist, sollte der Zellenwert (numerisch) in roter Farbe angezeigt werden.

Hier ist, was ich versucht habe:

<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 veröffentlicht und es hat vielleicht einige Änderungen und Verbesserungen über Zellbearbeitung Ihre Version zu aktualisieren helfen.

Answer 2

@AnandCMS,

Sie müssen dies nicht jQuery zu erreichen. Dies kann durch kleine Optimierungen in der PrimeNG-Vorlage selbst erfolgen.

Nutzen Sie <template> innerhalb <p-column> und binden Klasse .error es, wenn Daten negativer Wert.

Aktualisiert Vorlage:

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

Jetzt in Ihrem CSS:

.error { 
    color: red; 
} 

Bitte versuchen Sie dies und zu aktualisieren.