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>）にクラスを与える必要があり、その列内の一部の細胞がありますクラスと同じ列にある他のクラスはそうしないでしょう。

Plunker

編集：私は<td>内のHTML要素にクラスを与える方法を知っているが、私はそれが<td>自体にクラスを付与することが可能かどうかを知りたいです。

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

。これを行うために、私はディレクティブを実装：

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

のIのようにマークアップでそれを使用する：あなたはTD要素への参照を持っていたら、あなたが望む任意のCSS変換を適用することができます

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

。

このアプローチは「角度」のようには感じられませんが、現在のところ、これは私がこれを達成するために管理した唯一の方法です。