如何将 ngClass 类型功能添加到一行 Primeng p-datatable

Question

我已经使用 Primeng 一段时间了。

我在我的组件中使用了 Primeng 数据表 (p-dataTable)。我想要做的组件是收件箱。我将消息从数据库读取到 Angular 中名为 'Message' 的模型 2. 模型中有一个名为 Read 的字段。它被用作旗帜。它的布尔值。我的要求是，如果 Read 为假，则整行元素应为一种颜色，例如 color1。如果 Read 为真，则整个行元素应该是另一种颜色，比如 color2。

我知道如何使用 ngClass 做同样的事情。

有人可以建议我如何使用 p-dataTable 做同样的事情。我通过参考许多网站尝试了很多方法，但没有找到任何方法。 我想要的是类似于p-dataTable中ngClass的功能

这是我的代码

在HTML

<p-dataTable [rowStyleClass]="readFlag" [value]="message" >
        <p-column [style]="{'width':'38px'}"  selectionMode="multiple"></p-column>
        <p-column field="SenderUserId"  header="From" [sortable]="true"></p-column>
        <p-column class="icon-mandatory" field="Subject" header="Message"></p-column>
        <p-column field="MessageDate" header="Time" [sortable]="true">
            <template let-col let-message="rowData" pTemplate type="body">
                <span>{{message.MessageDate | date: 'medium'}}</span>
            </template>
        </p-column>
</p-dataTable>

在组件中

readFlag(rowData: Message) { return rowData.Read ? 'inbox-Read' : 'inbox-Unread' ; }

消息模型

export class Message 
{
    public Subject: string;
    public Body: string;
    public MessageDate: any;
    public Read: boolean;
}

Answer 1

您可以使用 rowstyle class 属性。它在 primeng 文档中。它以一个函数作为参数。函数应该 return 设置 class 或尝试 [attr.class]="condition? 'color1':'color2'"

参考：https://www.primefaces.org/primeng/#/datatable

Answer 2

我找到了问题的答案

在HTML

<p-dataTable [rowStyleClass]="applyReadFlagStyle" [value]="message">
        <p-column [style]="{'width':'38px'}"  selectionMode="multiple"></p-column>
        <p-column field="SenderUserId"  header="From" [sortable]="true"></p-column>
        <p-column field="Subject" header="Message"></p-column>
        <p-column field="MessageDate" header="Time" [sortable]="true">
            <template let-col let-message="rowData" pTemplate type="body">
                <span>{{message.MessageDate | date: 'medium'}}</span>
            </template>
</p-dataTable>

在组件中

applyReadFlagStyle(rowData: Message): string {
    return rowData.IsRead ? 'inbox-Read': 'inbox-UnRead'  ;
}

如何将 ngClass 类型功能添加到一行 Primeng p-datatable

How to add ngClass type functionality to a row of Primeng p-datatable

angular

typescript

primeng