Цвет фона ячейки умной таблицы Ng2 в зависимости от содержимого

Question

Я использую модуль Ng2-smart-table (https://akveo.github.io/ng2-smart-table/#/documentation).

Можно ли настроить фон ячейки / или целой строки в зависимости от содержимого той же ячейки / или ячейки той же строки? Можете привести пример?

Спасибо

Answer 1

Если вам нужно только изменить класс на основе значения ячейки, существует 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

---

Пользовательский компонент рендеринга может быть полезен, если вы хотите внедрить определенный стиль CSS, который не отображается в типе ячейки html.

Answer 2

Я понял это:

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();
  }

}