css - PrimeNG 数据表设置 rowStyleClass 是设置高亮样式

Question

我正在使用 rowStyleClass 和数据表，就像我在 html 中看到的所有示例一样:

<p-dataTable [value]="group.data" sortField="displayName" sortMode="single" [rowStyleClass]="getSelected" 
        [rowTrackBy]="dataTrackBy" [responsive]="true">

还有一个方法:

getSelected(rowData: DataItem) {
    return rowData.selected ? 'selected-bg' : 'unselected-bg';
}

和CSS:

.unselected-bg {
    background-color: white
}

.selected-bg {
    background-color: #d9edf7;
}

我遇到的问题是，当我将 rowData.selected 设置为 true 时，会设置突出显示状态，如以下元素副本所示:

<tr class="ui-datatable-odd ui-widget-content selected-bg ui-datatable-even ui-state-highlight" ng-reflect-klass="ui-widget-content selected-bg" ng-reflect-ng-class="[object Object]">

从那里开始，该行变为突出显示颜色，将所选值设置回 false 不会将其删除。我究竟做错了什么？我也想过使用 rowStyleMap 属性，但我并没有真正理解如何使用的文档。

我正在使用 PrimeNG v. 4.1.2

谢谢!

Answer 1

正确的方法是使用新的 p-table 和 ngClass，这里是一个演示；

https://www.primefaces.org/primeng/#/table/style