如何将样式类添加到p-dataTable行 [英] How to add style class to p-dataTable row

问题描述

我们正在使用PrimeNG 1.0.0-beta.16中的p-dataTable

We're using p-dataTable from PrimeNG 1.0.0-beta.16

我想在值为true时向行添加样式. 我想出了如何使用单元格进行此操作，但是我需要整行更改其背景.

I want to add a style to the row when a value is true. I figured it out how to do this with the cell, but I need the whole row the change its background.

<p-dataTable [hidden]="loading" [value]="timePeriods" scrollable="true" scrollHeight="400px" rowStyleClass="missingPeriod">
    <p-column field="StartDate" header="Begindatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span [class.missingPeriod]="!timePeriod.IsNext">{{timePeriod.StartDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
    <p-column field="EndDate" header="Einddatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span>{{timePeriod.EndDate | date: 'dd-MM yyyy'}}</span> 
        </template>
    </p-column>
</p-dataTable>

<span [class.missingPeriod]="!timePeriod.IsNext">正常工作，但rowStyleClass="missingPeriod"无效.

请咨询.

更新的语法:

已更新至v1.0.1

Updated to v1.0.1

<p-dataTable [hidden]="loading" [rowStyleClass]="customRowClass" [value]="timePeriods" scrollable="true" scrollHeight="400px">
    <p-column field="StartDate" header="Begindatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span [class.missingPeriod]="!timePeriod.IsNext">{{timePeriod.StartDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
    <p-column field="EndDate" header="Einddatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span>{{timePeriod.EndDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
</p-dataTable>

还有打字稿:

public customRowClass(rowData, rowIndex): string {
    console.log("In customRowClass");
    console.log(rowData);
    console.log(rowIndex);
    return "";
}

customRowClass内部没有任何记录.在我看来，没有调用此方法.

Nothing inside customRowClass is logged. It seems to me this method isn't called.

推荐答案

在PrimeNg的1.1.3版本中，此问题已修复.所以这个问题可以解决.

In version 1.1.3 of PrimeNg this is fixed. So this question can be closed.

这篇关于如何将样式类添加到p-dataTable行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！