PrimeNG DataTable: Klasse/Stil einer Zelle ändern

Question

Wie kann ich eine Klasse eine Zelle je nach Feld Wert hinzufügen?

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

Ich weiß, wie Klasse in einer Spalte alle Zellen an, aber ich brauche, um eine Klasse zu Zellen (<td>) individuell geben, auf dem Wert in status gespeichert abhängig, so dass einige Zellen in einer Spalte haben die Klasse und einige andere in derselben Spalte werden nicht angezeigt.

Plunker

Editiert: Ich weiß, wie in der <td> eine Klasse zu einem HTML-Element zu geben, aber ich möchte wissen, ob es möglich ist, eine Klasse zum <td> selbst zu geben.

Answer 1

Sie können eine Vorlage Stil:

<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

Um die gesamte Zelle zu gestalten, werden Sie das TD-Element, das Gastgeber Ihre ng-Vorlage finden müssen. Dazu implementiert ich eine Richtlinie:

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

Das habe ich es im Markup als:

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

Sobald Sie einen Verweis auf das TD-Element haben, können Sie alle CSS-Transformationen anwenden Sie wollen .

Dieser Ansatz fühlt sich nicht wie der "eckige" Weg an, aber momentan ist dies der einzige Weg, wie ich es geschafft habe.