PrimeNG 데이터 테이블 조건부 셀 서식 지정

Question

해당 셀의 값을 기반으로 개별 셀의 내용을 색칠하려고합니다. 예를 들어 셀 값 (숫자)이 음수이면 셀 값 (숫자)이 빨간색으로 표시되어야합니다.

<p-dataTable #dt [value]="DataList" [rows]="10" [paginator]="true" [pageLinks]="4" [rowsPerPageOptions]="[10,20,50,100]" scrollable="true" scrollHeight="400px"> 
<p-column [style]="{'width':'134px','text-align':'right'}" field="UnitChange" header="Units Change" [sortable]="true"> </p-column> 
<p-column [style]="{'width':'134px','text-align':'right'}" field="UnitPercentChange" header="% Change (Units)" [sortable]="true"></p-column> 

Answer 1

Primeng 2.0 RC.1 출시 그것은 어쩌면 도움이 될 것입니다 버전을 업그레이드 세포 편집에 대한 몇 가지 변경 사항 및 개선 사항이 있습니다 여기에

내가 시도하는 것이다.

Answer 2

@AnandCMS는

이를 달성하기 위해 jQuery를 사용할 필요가 없습니다. PrimeNG 템플릿 자체의 사소한 개조로이 작업을 수행 할 수 있습니다.

<p-column> 내에 <template>을 사용하고 데이터가 음수 일 때 .error을 바인드하십시오.

업데이트 템플릿 : 당신의 CSS에서 지금

<p-column [style]="{'width':'134px','text-align':'right'}" field="UnitChange" header="Units Change" [sortable]="true"> 
    <template let-col let-data="rowData" pTemplate="body"> 
     <span [ngClass]="{'error': (data[col.field] < 0) }">{{ data[col.field] }}</span> 
    </template> 
</p-column> 

는 :

.error { 
    color: red; 
} 

이 업데이트를 시도하십시오.