gpt4 book ai didi

angular - 动态更改 ngx-datatable 中的行颜色

转载 作者:行者123 更新时间:2023-12-04 02:43:20 28 4
gpt4 key购买 nike

我在 Angular 7 中使用 ngx-datatable。我需要根据数据集附带的颜色值动态更新表格行颜色。

我已经尝试过 rowClass 功能。但这不是我要找的。

如何在数据集中使用颜色代码动态设置行 background-color

这是 stackblitz

最佳答案

您在 StackBlitz 中非常接近。所有行都是绿色的,因为您没有根据行数据决定任何事情。您总是返回 true(这意味着它总是使用相同的类)。如果您根据条件返回一个或多个类名,您将获得所需的结果。

/deep/ .row-color1 {
background-color: rgb(96, 212, 96);
}
/deep/ .row-color2 {
background-color: rgb(51, 201, 228);
}

getRowClass() typescript 函数

  getRowClass = (row) => {    
return {
'row-color1': row.gender == "Male",
'row-color2': row.gender == "Female",
};
}

这里我根据两个条件返回两个类。 ngx 数据表 API documentation说你可以返回一个对象或一个字符串(上面的例子是一个返回的对象)。

我创建了一个新的 stackblitz与修复( fork 你的)

关于angular - 动态更改 ngx-datatable 中的行颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58264788/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com