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

Question

如果输入为负，我想更改单元格/值的颜色。我知道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中一样，我也注意到返回类型为any。

我将其记录在控制台中，以便可以正确地处理该类

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

这样我得到了这个物体：

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

此外，我可以使用新创建的NgxDatatableCell类来传递cellClass的预期对象

    export class NgxDatatableCell {
    value: number;
}

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

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