如何有条件地为ngx-datatable的单元格着色

Question

如果条目为负数，我想更改 cell/value 的颜色。我知道 getCellClass 函数中应该有更多参数，但我不知道如何正确处理它们，因为 ngx-datatable 的文档不容易理解。

TS-文件， CSS-文件， HTML-文件,

getCellClass(row: RowObject) {
  return {
    'ngx-datatable-value-negative': row.value <= 0
  };
}

.ngx-datatable-value-negative {
  color: red !important;
}

<ngx-datatable>
  <ngx-datatable-column [cellClass]="getCellClass" [resizeable]="false" [width]="50" prop="openTimeInHours" [summaryTemplate]="templateForOpen" headerClass="text-right">
    <ng-template ngx-datatable-header-template let-column="column">
      <span title="Tooltip">Column Name</span>
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
      <div class="text-right">
        {{value | number: '1.2-2'}}
      </div>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

Answer 1

您尝试使用 [ngclass] 选择器了吗？

getCellClass(value: number) {
  return {
    'ngx-datatable-value-negative': value <= 0
  };
}

.ngx-datatable-value-negative {
  color: red !important;
}

<ngx-datatable>
  <ngx-datatable-column [resizeable]="false" [width]="50" prop="openTimeInHours" [summaryTemplate]="templateForOpen" headerClass="text-right">
    <ng-template ngx-datatable-header-template let-column="column">
      <span title="Tooltip">Column Name</span>
    </ng-template>
    <ng-template let-value="value" [ngclass]="getCellClass(value)" ngx-datatable-cell-template>
      <div class="text-right">
        {{value | number: '1.2-2'}}
      </div>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

Answer 2

我解决了我的问题。重要的是要了解 getClass 需要一个已定义的对象。就像在 ngx-documentation 中一样，我也注意到 return 类型为 any.

我将其记录在我的控制台中，因此我可以正确处理 class

getCellClass(a: any): any {
  console.log(a);
  return {
    'ngx-datatable-value-negative': value <= 0
  };
}

这样我得到了这个对象：

{row: {…}, group: undefined, column: {…}, value: -0.5, rowHeight: "auto"}

此外，我可以使用我新创建的 NgxDatatableCell Class 来传递 cellClass

的预期对象

    export class NgxDatatableCell {
    value: number;
}

最后这就是我的方法现在的样子

getCellClass(row: NgxDatatableCell): any {
    return {
        'ngx-datatable-value-negative': row.value < 0,
    };
}

如何有条件地为ngx-datatable的单元格着色

How to color conditionally a cell for ngx-datatable

typescript

ngx-datatable

angular