Angular2 PrimeNG 조건부 행 서식 지정

Question

PrimeNG 구성 요소를 사용하는 Angular2 앱이 있습니다. 필자는 필드가 특정 값일 때 DataTable의 행이 특정 색으로 채워지도록하려고합니다. 행 강조 표시에 사용할 색상 값이 들어있는 다른 필드가 있지만 작동하게하는 방법을 찾을 수 없습니다.

내 모델 (매우 간단) 다음과 같습니다

그래서 기본적으로 5 일의 리드 타임에 부착 된 경우

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

는, 그것이 얼마나 가까운 리드 시간에 따라 색상을 변경합니다. 내 템플릿에서

난 다음 있습니다 : 당신이 볼 수 있듯이

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

이 방법으로 사용하여 보시기 바랍니다

Answer 1

입니다 primeng 데이터 테이블은 학부모 td. 주변 공백을 채우려면 부모 p-column의 패딩을 styleClass을 사용하여 styleClass을 사용하여 0으로 설정 한 다음 데이터 테이블 부모 인 td (아래 예 참조) 내의 div에 padding을 추가합니다.

이 방법을 사용하는 주된 이유는 현재 행의 데이터를 기반으로 특정 셀의 배경색을 변경하려는 경우입니다. 이 방법을 사용하여 데이터를 기반으로 전체 행의 배경색을 변경하려면 각 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}" 

대신 :

div 주위 주위의 공백에 대한 이유 때문에 padding의

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