J'essaie de colorer le contenu de la cellule individuelle en fonction de la valeur de cette cellule. par exemple, si la valeur de la cellule (numérique) est négative, elle doit afficher la valeur de la cellule (numérique) en rouge.

Voici ce que j'ai essayé:

<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>
2
AnandSonake 17 janv. 2017 à 13:40

2 réponses

Meilleure réponse

Primeng 2.0-RC.1 est sorti et il a quelques changements et améliorations sur l'édition de cellules peut-être que la mise à niveau de votre version vous aidera.

1
Mertcan Diken 24 janv. 2017 à 14:22

@AnandCMS,

Vous n'avez pas besoin d'utiliser jQuery pour y parvenir. Cela peut être fait par des ajustements mineurs dans le modèle PrimeNG lui-même.

Utilisez <template> dans <p-column> et associez-y la classe .error lorsque les données ont une valeur négative.

Modèle mis à jour:

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

Maintenant dans votre css:

.error {
  color: red;
}

Veuillez essayer ceci et mettre à jour.

3
anusreemn 21 avril 2017 à 06:44