如何为<p列>分配背景色取决于angular4中的字段值

Question

我创建了一个primeNG表。在这方面，我想要分配背景色取决于字段值。如果字段值在50%到60%之间，我想要指定红色。如果字段值在60%到70%之间，我想要指定黄色。如果字段值高于此值，则要分配绿色颜色。我是怎么做到的？primeNG表的代码如下

<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

使用来自这里的这里。这个示例需要适应您的情况，但非常类似于您的情况：

TypeScript

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>

.

演示