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

Question

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

我已经尝试过Vue.js功能。但这不是我想要的。

如何使用数据集中的颜色代码动态设置行class="sidebar--opened"？

这里是stackblitz

Answer 1

您真的很接近StackBlitz。所有行都是绿色的，因为您没有根据行数据决定任何内容。您一直在返回true（这意味着它始终使用相同的类）。如果您根据条件返回一个或多个类名称，则将获得所需的结果。

课程

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

getRowClass（）打字稿功能

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

在这里，我将根据两个条件返回两个班级。 ngx可用的API documentation表示您可以返回对象或字符串（上面的示例是返回的对象）。

我已经创建了一个新的stackblitz并带有修复程序（在您的计算机上分叉了）

Answer 2

我不会特别关注ngx-datatable包，而是研究更通用的解决方案，例如：

Generate dynamic css based on variables angular

所以我将使用动态类，然后使用所需的颜色增强css。