Angular2 PrimeNG Conditional String Formatting

Question

I have an Angular2 application using PrimeNG components. I am trying to make sure that when a field has a specific value, the row in the DataTable is colored in a specific color. I have another field that contains a color value for highlighting a line, but cannot decide how to make it work.

My model is as follows (very simplified):

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';
    }
 }
}

Thus, basically, if he adhered to the lead time of 5 days, it changes color depending on how close it is to the lead time.

In my template, I have the following:

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

As you can see, I have [style.background]="{{rep.LeadTimeRemaining}}"to try to set the color of the column.

, , , .

- , - .

, , , div, td tr.

<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 datatable td (. ).

, . , , p-column. , . .

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

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

Answer 3

Try using this method:

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

instead:

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