Angular2 PrimeNG條件行格式化

我有一個使用PrimeNG組件的Angular2應用程序。我試圖做到這一點，以便當一個字段具有特定的值時，DataTable中的行被着色爲特定的顏色。我有另一個字段，其中包含用於突出顯示行的顏色值，但無法找到如何使其工作。Angular2 PrimeNG條件行格式化

我的模型如下（非常簡化）：

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}}"嘗試設置列的顏色。

我想這是錯誤的方式去做它的設置它只是爲了列和id需要在每列相同。

任何人都可以幫助我，我無法找到任何有關它的任何信息。

非常感謝

編輯

使用下面的每列它突出的一點卻是非常難看的，你可以看到下面的，因爲它只是顏色股利而非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>

來源

2016-10-20 DaRoGa

你有任何這方面的進展如何？ – Tito

不幸的是，我只能夠將文本着色而不是整行。 – DaRoGa

的原因div在周圍的空白是因爲padding的primeng數據表適用於父母td。要填充周圍的空白，可以將父項p-column的填充設置爲0（使用styleClass），然後將padding添加到可數據父項td（請參見下面的示例）內的div。

採取這種方法的主要原因是如果您想根據當前行的數據更改僅某些單元的背景顏色。如果您想使用此方法根據其數據更改整行的背景顏色，則必須在每個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>

來源

2017-02-02 22:11:43 stewdebaker

請嘗試使用這種方法：代替

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

：

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

來源

2016-10-20 09:36:57 user7047111

這不起作用。我通過在每一列添加'

'來工作，但是這明顯地在td內部顯示一個div，而不是整個td，因此我需要一種方法來爲td創建它，因爲仍然存在大量的空白，這就是難看 – DaRoGa

您可以在數據表中使用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; }

來源

2017-06-08 04:32:42 uvv001

Angular2 PrimeNG條件行格式化

回答

相關問題