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

Question

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

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

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

这是堆栈闪电战

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-datable API 文档说你可以返回一个对象或一个字符串（上面的例子是一个返回的对象）。

我已经创建了一个新的stackblitz修复（分叉在你的）