Question

我正在使用模块Ng2-smart-table（https://akveo.github.io/ng2-smart-table/#/documentation）。

是否可以根据相同单元格/同一行单元格的内容自定义单元格/或整行的背景？你能提供一个例子吗？

谢谢

Answer 1

我明白了：

import { Component, Input, OnInit } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';


@Component({
  template: `
  <span [ngClass]="classToApply">{{renderValue}}</span>
  `,
  styles: ['.error { color: red; }']
})
export class MyColumnRenderComponent implements ViewCell, OnInit {

  renderValue: string;

  @Input() value: string | number;
  @Input() rowData: any;

  classToApply = '';

  ngOnInit() {
    if(this.value == 'MY_ERROR_CODE') {
      this.classToApply = 'error';
    }
    this.renderValue = this.value.toString().toUpperCase();
  }

}

Answer 2

如果您只需要基于单元格值更改类，则可以使用 valuePrepareFunction ：

valuePrepareFunction: (cell) => {
  if (cell === 'one') {
    return '<p class="firstCellClass">' + cell + '</p>';
  } else if (row.anotherCellName == 'two') {
    return '<p class="secondCellClass">' + cell + '</p>';
  } else {
    return '<p class="defaultCellClass">' + cell + '</p>';
  }
},

对于整个行也有一个 rowClassFunction ：

https://github.com/akveo/ng2-smart-table/pull/355

当您要注入不在“ html”单元格类型中呈现的特定css样式时，自定义呈现组件可能会很有用。

Answer 3

您可以应用带有动态变量的样式。就我而言，我需要根据燃料类型应用背景，因此我按如下方式使用

 Volume: {
    type: 'html',
    title: 'Volume',
    valuePrepareFunction: ((Volume, row)=> {
        return this.domSanitizer.bypassSecurityTrustHtml(`<h6 class="text-white p-t-0 qlz-line-height text-center" style="background:${this.getFuelColor(row.FuelType)}"><strong>${Volume} gal </strong> </h6>`);
    }),
    width: '15%'
  }

然后在getFuelColor（fuelType）中，我根据fuelType导出颜色。

Ng2-smart-table单元格背景颜色取决于内容

3 个答案: