L'attribution de couleur d'arrière-plan à <p-column> dépend des valeurs de champ en angulaire4

Question

J'ai créé une table primeNG. En ce que je veux attribuer la couleur de fond dépend de la valeur du champ. Si la valeur du champ est comprise entre 50% et 60%, je souhaite attribuer une couleur rouge. Si la valeur du champ est comprise entre 60% et 70%, je souhaite attribuer une couleur jaune. Si la valeur du champ est au-dessus, je veux attribuer une couleur verte. Comment je le fais? code pour la table primeNG est inférieure à

<p-dataTable [value]="facility" [rows]="5" [paginator]="true" [globalFilter]="gb" #dt [pageLinks]="4" [rowsPerPageOptions]="[5,10,20]" > 
    <p-column [style]="{'width':'5%'}" field="action" header=""></p-column> 
    <p-column field="Goal" header="Goal" [sortable]="true" ></p-column> 
    <p-column field="day1" header="8/1" [sortable]="true"></p-column> 
    <p-column field="day2" header="8/2" [sortable]="true"></p-column> 
    <p-column field="day3" header="8/3" [sortable]="true"></p-column> 
    <p-column field="day4" header="8/4" [sortable]="true"></p-column> 
    <p-column field="day5" header="8/5" [sortable]="true"></p-column> 
    <p-column field="day6" header="8/6" [sortable]="true"></p-column> 
    <p-column field="day7" header="8/7" [sortable]="true"></p-column> 
    <p-column field="day8" header="8/8" [sortable]="true"></p-column> 
    <p-column field="day9" header="8/9" [sortable]="true"></p-column> 
    <p-column field="day10" header="8/10" [sortable]="true"></p-column> 
    <p-column field="day11" header="8/11" [sortable]="true"></p-column> 
    <p-column field="day12" header="8/12" [sortable]="true"></p-column> 
    <p-column field="day13" header="8/13" [sortable]="true"></p-column> 
    <p-column field="day14" header="8/14" [sortable]="true"></p-column> 
    <p-column field="day15" header="8/15" [sortable]="true"></p-column> 
    <p-column field="day16" header="8/16" [sortable]="true"></p-column> 
    <p-column field="day17" header="8/17" [sortable]="true"></p-column> 
    <p-column field="day18" header="8/18" [sortable]="true"></p-column> 
    <p-column field="day19" header="8/19" [sortable]="true"></p-column> 
    <p-column field="day20" header="8/20" [sortable]="true"></p-column> 
    <p-column field="day21" header="8/21" [sortable]="true"></p-column> 
</p-dataTable> 

Answer 1

Utilisez ngStyle de here. Ce exemple, doit être adapté à votre situation, mais est très similaire à votre cas:

tapuscrit

changeColor(value){ 
    return value>30 ?'red' : 'green' // please adapt to your need 
} 

HTML: .....

<p-column field="Col3" header="Column 3" [sortable]="true" [style]="{'width': '200px'}"> 
    <ng-template let-data="rowData" pTemplate="body"> 
     <div [ngStyle]="{'background-color': changeColor(data['Col3'])}"> 
     {{data['Col3']}} 
     </div> 
    </ng-template> 
    </p-column> 

.....

DEMO