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

使用here中的ngStyle。这个示例需要根据您的情况进行调整，但与您的情况非常相似：

<强>打字稿

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

如何为<p-column>指定背景颜色取决于angular4中的字段值

1 个答案: