1

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

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

谢谢

4

3 回答 3

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 开发颜色。

于 2019-11-20T20:44:48.773 回答
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();
  }

}
于 2018-05-03T13:02:04.723 回答
0

如果您只需要根据单元格值更改类，则有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 样式时，自定义渲染组件可能很有用。

于 2018-08-23T10:47:04.310 回答