Как условно покрасить ячейку для ngx-datatable - PullRequest
Новая
       5

Как условно покрасить ячейку для ngx-datatable

0 голосов
/ 03 февраля 2020

Я хочу изменить цвет ячейки / значения, если запись отрицательная. Я знаю, что внутри функции getCellClass должно быть больше параметров, но я не знаю, как правильно обращаться с ними, поскольку документация по ngx-datatable непроста для понимания.

TS-File, CSS -File, 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>

Ответы [ 2 ]

0 голосов
/ 04 февраля 2020

Я решил свою проблему. Важно было понять, что getClass ожидает определенный объект. Как и в ngx-документации Я также заметил тип возвращаемого значения 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,
    };
}
0 голосов
/ 03 февраля 2020

Вы пробовали с селектором [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>
...