0

如何根据字段值向单元格添加类？

<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，因此列中的某些单元格将具有该类，而其他一些单元格将在同一列中惯于。

普朗克

已编辑：我知道如何为 中的 HTML 元素提供一个类<td>，但我想知道是否可以为<td>自身提供一个类。

4

2 回答 2

0

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

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

我在标记中使用它：

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

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

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

于 2017-12-23T18:41:48.490 回答
0

您可以为模板设置样式：

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

笨拙

于 2017-05-19T13:38:24.057 回答