Question

我一直在使用Primeng。

我在我的组件中使用了Primeng Datatable（p-dataTable）。我想要做的组件是收件箱。我从DB读取消息到名为＆＃39; Message＆＃39;在Angular 2.模型中有一个名为Read的字段。它用作旗帜。它的布尔值。我的要求是如果Read为false，整个行元素应该是一种颜色，比如color1。如果Read为true，则整个行元素应为另一种颜色，例如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类属性。它存在于primeng文档中。它需要一个函数作为参数。该函数应返回要设置的类或尝试[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中

2 个答案: