PrimeNG DataTable : 셀의 클래스/스타일 변경

Question

필드 값에 따라 셀에 클래스를 추가하려면 어떻게해야합니까?

<p-dataTable [value]="invoices" tableStyleClass="table-invoices"> 
    <p-column field="status" header="Status" styleClass="mini status"> 
     <ng-template pTemplate="body" let-col let-inv="rowData"> 
      {{inv.status}} 
     </ng-template> 
    </p-column> 
</p-dataTable> 

나는 열의 모든 셀에 클래스를 추가하는 방법을 알고,하지만 난 status에 저장된 값에 따라 개별적으로 세포 클래스 ( <td>)을 줄 필요하므로 열에서 일부 세포는 것 클래스와 같은 열의 다른 것들은 그렇지 않을 것입니다. 나는 <td> 내부의 HTML 요소에 클래스를 제공하는 방법을 알고 있지만,이 <td> 자체 클래스를 제공 할 수 있는지 나는 알고 싶어

Plunker

는 편집.

Answer 1

템플릿 스타일을 지정할 수 있습니다 : 당신이 당신의 NG-템플릿을 호스트하는 TD 요소를 발견 할 것이다 전체 셀의 스타일을하기 위해

<p-dataTable [value]="invoices" tableStyleClass="table-invoices"> 
    <p-column field="status" header="Status" styleClass="mini {{rowData}}" > 
     <ng-template pTemplate="body" let-col let-inv="rowData"> 
      <div [class.decorated]="inv.status == 1">{{inv.status}}</div> 
     </ng-template> 
    </p-column> 
</p-dataTable> 

plunkr

Answer 2

. 당신은 TD 요소에 대한 참조를 일단

<ng-template let-col let-data="rowData" pTemplate="body"> 
    <div [id]="col.field" class="cell-content" [cellFormatting]="data"> 
     <div [innerHTML]="data[col.field]" class="center-parent-screen"></div> 
    </div> 
</ng-template> 

, 당신은 당신이 원하는 CSS 변환을 적용 할 수 있습니다

import { Directive, ElementRef, Renderer, Input, OnInit } from '@angular/core'; 

@Directive({ 
    selector: '[cellFormatting]' 
}) 
export class CellFormattingDirective { 
    @Input() cellFormatting: any; 

    constructor(private el: ElementRef, renderer: Renderer) { 

    } 

    ngOnInit() { 
     let target = this.el.nativeElement; 
     let td = target.closest('td'); 
     if (td) { 
      //apply some conditions here using data.cellFormatting 
      td.style.backgroundColor = 'darkorange'; 
      td.style.color = 'white'; 
     } 
    } 
} 

(가) 내가 같은 마크 업에 사용 이렇게하려면, 내가 지시를 구현 .

이 방법은 "각도"방식처럼 느껴지지 않지만, 현재이 방법을 사용하여이 작업을 수행 할 수 있습니다.