Angular2 PrimeNG Условный ряд Форматирование

Question

У меня есть приложение Angular2 с использованием компонентов PrimeNG. Я пытаюсь сделать так, чтобы, когда поле имеет определенное значение, строка в DataTable окрашена в определенный цвет. У меня есть другое поле, которое содержит значение цвета для выделения строки, но не может решить, как заставить его работать.

Моя модели выглядит следующим образом (очень упрощенный):

export class RepackRequest{ 
AdhereToLeadTime: boolean; 
LeadTimeRemaining: string; 

constructor() { 
    var today = new Date(); 
    if(this.AdhereToLeadTime){ 
     var difference = today.getTime() - this.StartDate.getTime(); 
     if(difference >= 3 && difference <= 4){ 
      this.LeadTimeRemaining = "orange"; 
     } 
     else if(difference >= 5){ 
      this.LeadTimeRemaining = "red"; 
     } 
    } 
    else { 
     this.LeadTimeRemaining = 'white'; 
    } 
} 
} 

Так в основном, если она приклеена к заблаговременности 5 дней, он меняет цвет в зависимости от того, насколько близко к заблаговременности это.

В моем шаблоне я тогда иметь следующее:

<p-dataTable [value]="approvalRepacks" 
          [rows]="10" 
          [paginator]="true" 
          [pageLinks]="5" 
          [rowsPerPageOptions]="[5,10,20]" 
          selectionMode="single" 
          [(selection)]="selectedRepack" 
          (onRowSelect)="onSelect()" 
          [globalFilter]="na"> 
       <header> 
        <div style="text-align:center;"> 
         <button pButton type="button" icon="fa-plus" iconPos="left" label="Create New Request" (click)="addNew()"></button> 
        </div> 
       </header> 
       <p-column field="DateRequested" header="Date Requested" sortable="true"> 
        <template let-col let-rep="rowData" pTemplate type="body"> 
         <span [style.background]="{{rep.LeadTimeRemaining}}">{{rep[col.field] | date:'dd/MM/yyyy'}}</span> 
        </template> 
       </p-column> 
       <p-column field="OrderNum"   header="Order No"   sortable="true" styleClass="wordBreak"></p-column> 
       <p-column field="Customer"   header="Customer"   sortable="true"></p-column> 
       <p-column field="FromItem"   header="Repack From"  sortable="true" styleClass="wordBreak"></p-column> 
       <p-column field="ToItem"   header="Repack To"   sortable="true" styleClass="wordBreak"></p-column> 
       <p-column field="FromWarehouse"  header="From Whse"   sortable="true"></p-column> 
       <p-column field="FromLocation"  header="From Bin"   sortable="true"></p-column> 
       <p-column field="ToWarehouse"  header="To Whse"   sortable="true"></p-column> 
       <p-column field="ToLocation"  header="To Bin"   sortable="true"></p-column> 
       <p-column field="Quantity"   header="Qty"    sortable="true"></p-column> 
       <p-column field="RequestedBy"  header="Requested By"  sortable="true" styleClass="wordBreak"></p-column> 
       <p-column header="Actions"> 
        <template let-col let-rep="rowData" pTemplate type="body"> 
         <button pButton type="button" icon="fa-check" label="Approve" (click)="approve(rep.ID)"></button> 
        </template> 
       </p-column> 
      </p-dataTable> 

Как вы можете видеть, у меня есть [style.background]="{{rep.LeadTimeRemaining}}" попытаться установить цвет столбца.

Я предполагаю, что это неправильный способ сделать это, поскольку он устанавливает его только для этого столбца, а идентификатор нужен одинаково для каждого столбца.

Может ли кто-нибудь помочь в этом, я не могу найти никакой информации об этом.

Большое спасибо

EDIT

Использование следующих на каждый столбец выделяет его в точку, однако это очень неприглядно, как вы можете увидеть ниже как это только красит DIV, а не тд или тр ,

<template let-col let-rep="rowData" pTemplate type="body"> 
    <div [style.background]="rep.LeadTimeRemaining" style="margin:-50px;"> 
     <span>{{rep[col.field]}}</span> 
    </div> 
</template> 

Answer 1

Причина окружающего белого пространства вокруг div из-за padding что primeng datatables относится к родитель td. Чтобы заполнить окружающие пробелы, вы можете установить дополнение родительского p-column к 0 (используя styleClass), а затем добавить padding в div внутри родительского элемента данных td (см. Пример ниже).

Основной причиной такого подхода было бы, если бы вы хотели изменить цвет фона только определенных ячеек на основе данных текущей строки. Если вы хотите изменить цвет фона всей строки на основе своих данных с помощью этого подхода, вам придется применять эти стили на каждом p-column. Если окраска всей строки является вашей целью, см. here для более простого подхода.

CSS:

.padding-none { 
    padding: 0 !important; 
} 

/** (optional) still pad table header and footer on datatables with columns set to .padding-none */ 
.ui-datatable thead th.padding-none, .ui-datatable tfoot td.padding-none, 
.ui-datatable tfoot th.padding-none { 
    /** set to whatever your default datatable td padding is */ 
    padding: .25em .5em !important; 
} 

.ui-datatable tbody td.padding-none div { 
    /** set to whatever your default datatable td padding is */ 
    padding: .25em .5em; 
} 

Шаблон:

<p-column field="..." header="..." styleClass="padding-none" sortable="true"> 
    <template let-col let-rep="rowData" pTemplate> 
    <div [style.background]="rep.LeadTimeRemaining"> 
     {{rep[col.field]}} 
    </div> 
    </template> 
</p-column> 

Answer 2

Пожалуйста, попробуйте использовать этот способ:

[style]="{'background':rep.LeadTimeRemaining}" 

вместо:

[style.background]="{{rep.LeadTimeRemaining}}" 

Answer 3

Вы можете выделить строку в DataTable с помощью атрибута rowStyleClass. Вы должны передать функцию этому атрибуту. Функция должна возвращать имя класса, которое будет применяться к строке таблицы.

Шаблон:

<p-dataTable [rowStyleClass]="highlightRow" ...> 

код компонента:

hightlightRow(rowData: any, rowIndex: number) { 
    return rowData.LeadTimeRemaining + '-hightliting'; 
} 

CSS:

.red-highliting { background-color: red; } 
.white-highliting { background-color: white; } 
.orange-highliting { background-color: orange; }