如何将样式类添加到p-dataTable行
问题描述:
我们正在使用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.