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

【问题标题】：Dynamically change row color in ngx-datatable动态更改 ngx-datatable 中的行颜色
【发布时间】：2020-02-04 11:13:47
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您在 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-datable API documentation 表示您可以返回一个对象或一个字符串（上面的示例是一个返回的对象）。

我已经创建了一个新的 stackblitz 并带有修复（在你的分支上）

【讨论】：