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>

我知道如何将类添加到列中的所有单元格，但我需要单独为单元格（<td>）提供一个类，具体取决于status中存储的值，因此有些单元格位于<td>中列将包含该类，而同一列中的其他列则不会。

Plunker

已编辑：我知道如何为<td>内的HTML元素提供课程，但我想知道是否可以为with recursive r as( (select x, y, (running_x_max <> x)::int grp, 0 iteration from (select *, max(x) over (order by y desc) running_x_max from xy) t order by 3, 2 desc) union all (select x, y, grp + (running_x_max <> x)::int, iteration + 1 from (select *, max(x) over (order by y desc) running_x_max from r where grp > iteration) t order by 3, 2 desc) ) select x, y, grp from r where grp = iteration order by 3, 2 desc, 1提供课程本身。

Answer 1

您可以设置模板样式：

<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

为了设置整个单元格的样式，您必须找到托管ng-template的TD元素。为此，我实现了一个指令：

require(['orion/editor/built-editor', 'orion/editor/stylers/application_javascript/syntax'], function(edit, syntax) {  

    var deferred = new $.Deferred();
    deferred.resolve(syntax);

    edit({
          className: "editor",
          lang:'js',
          grammarProvider: function(){                    
             return deferred.promise();                 
          }
   });
});

我在标记中使用它：

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

一旦引用了TD元素，就可以应用任何所需的CSS转换。

这种方法不像“Angular”方式，但目前，这是我设法实现这一目标的唯一方法。

PrimeNG DataTable：更改单元格的类/样式

2 个答案: