如何将 ngClass 类型功能添加到一行 Primeng p-datatable
How to add ngClass type functionality to a row of Primeng p-datatable
我已经使用 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;
}
您可以使用 rowstyle class 属性。它在 primeng 文档中。它以一个函数作为参数。函数应该 return 设置 class 或尝试 [attr.class]="condition? 'color1':'color2'"
我找到了问题的答案
在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' ;
}
我已经使用 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;
}
您可以使用 rowstyle class 属性。它在 primeng 文档中。它以一个函数作为参数。函数应该 return 设置 class 或尝试 [attr.class]="condition? 'color1':'color2'"
我找到了问题的答案
在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' ;
}