Angular 如何将样式类添加到p-dataTable行

我们使用的是来自Priming 1.0.0-beta.16的p-dataTable

我想在值为true时向行添加样式。 我想出了如何处理单元格的方法，但我需要整行更改背景

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

和打字稿：

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

---

customRowClass

中未记录任何内容。在我看来，这个方法没有被调用。

rowStyleClass

的工作原理与您想象的稍有不同；它接受一个函数作为输入，返回一个字符串（CSS类名）。它列在列表中

在我的HTML中，我有：

<p-dataTable [rowStyleClass]="lookupRowStyleClass" ...>

在全局CSS文件中：

/* TODO: this should really be in the component's CSS file, but it doesn't seem to apply to the PrimeNG data table properly there */
.disabled-account-row {
    /* TODO: first try this without '!important', but you might need it */
    color: silver !important;
}

---

如果这没有帮助，您需要升级到更新的版本。Priming 1.0.0 RC5已于2016年11月推出。

似乎是

scrollable=“true”

导致的。当

scrollable

设置为

true

时，将使用不同的模板，该模板不具有

getRowStyleClass

的绑定

在这里，您可以看到

对于不可滚动的表，它具有

getRowStyleClass

的绑定：

但是可滚动表的

没有绑定：

你可以在中看到这两种情况，我已经发布了一个问题

---

我看不出有任何理由不能在可滚动的表上使用该方法，因此我已提交了一份PR，其中有一个修复程序，您可以对此进行监控。

在PrimeNg的1.1.3版中，这是修复的。所以这个问题可以结束了。

你在哪里找到RowStyleClass的？我在priming网站上的datatable属性列表中没有看到它。我使用Google找到了RowStyleClass。它可能适用于较旧版本的Priming。他们的示例链接不起作用，因此他们的网站没有太大帮助。您是否尝试使用

styleClass

属性？我还看到此提交建议使用不同的语法。这一行看起来更好，因为我的行需要根据行数据着色。不是像您的

用户那样的全局对象。我只是使用
npm update--save
进行更新，但我仍然无法让它工作。我刚刚在我的主题“开始”中发布了我的最新代码，使用GitHub上的示例。@PaulMeems尝试升级到更新版本的Priming，如1.0.0 RC5，如果您还没有升级的话。这种方法需要更新的版本。您的代码示例看起来不错。我已经更新到v1.0.1，但运气不好。你有工作样品吗？@PaulMeems啊，好的，是的，这是PrimeNG的最新版本。我在这个答案中提到的代码就是我一直在使用的代码，并且很有效。我想知道是否可以在datatable类中设置断点。感谢您发现问题。我已经订阅了您的问题，将等待解决方案。当您的问题解决后，我会将您的帖子标记为答案。修复程序似乎已合并到：。不确定新版本会以多快的速度发布。这仍然是一个合理的“操作”问题。不需要关门
lookupRowStyleClass(rowData: User) {
    return rowData.accountDisabled ? 'disabled-account-row' : '';
}

/* TODO: this should really be in the component's CSS file, but it doesn't seem to apply to the PrimeNG data table properly there */
.disabled-account-row {
    /* TODO: first try this without '!important', but you might need it */
    color: silver !important;
}