Ngx-datatable cellClass не работает

Я пытаюсь добавить свой собственный CSS в ячейку ngx-datatable.

<ngx-datatable-column 
  *ngFor="let column of tableOptions.columnDefs"
  [cellClass]="'my-custom-cell'"
  ...

Css для my-custom-cell:

.my-custom-cell{
  padding: 0;
}

В инструментах разработки я вижу, что datatable-body-cell имеет классы

class="datatable-body-cell my-custom-cell sort-active"

Проблема в том, что ни один css не переопределяется


angular ngx-datatable
person tprieboj    schedule 09.11.2017    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Возможно, вы столкнулись с проблемой инкапсуляции представления.

ngx-datatable использует стиль ViewEncapsulation.None. Вы можете добавить определение стиля .my-custom-cell в ./src/styles.(s)css или также установите для инкапсуляции компонента значение Нет.

Вы можете проверить детали просмотреть инкапсуляцию из руководства по angular, если вы не знаете о это уже.

Изменить (ответ для Комментарий Тома)

Мне тоже не нужно такое решение, но, к сожалению, похоже, так оно и есть ... Я подготовил демонстрационное приложение, которое показывает то, что я пытаюсь сказать.

.my-custom-cell назначена столбцу имени.

.my-custom-cell-global, назначенный столбцу пола.

./app/demo-component.ts

<ngx-datatable-column name="name" [cellClass]="'my-custom-cell'">
  <ng-template ngx-datatable-cell-template let-value="value">
    {{value}}
  </ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="gender" [cellClass]="'my-custom-cell-global'">
  <ng-template ngx-datatable-cell-template let-value="value">
    {{value}}
  </ng-template>
</ngx-datatable-column>

./app/demo-component.scss

.my-custom-cell {
  background: red;
}

./styles.scss

.my-custom-cell-global {
  background: #e6f2ff;
}

Как видите, красный фон не назначен столбцу имени. Но столбец пола получает синий цвет фона.

Это потому, что инкапсуляция представления сообщает cli о необходимости компиляции класса .my-custom-cell, как показано ниже:

.my-custom-cell[_ngcontent-c176]{background:red}

Но DATA с использованием а>. Если вы проверите одну из ячеек в столбце name, вы увидите, что ячейка datatable-body-cell, имеющая класс .my-custom-cell, не имеет атрибута [_ngcontent-c176]. Так что класс не применяется.

Если вы раскомментируете person Halil İbrahim Karaalp    schedule 09.11.2017

comment
[cellClass] или [rowClass] следует избегать таких вещей, как установка ViewEncapsulation на None. Это не то, что я хочу. - person tprieboj; 09.11.2017
comment
Редактирование - менее подходящее решение, поскольку подразумевает изменение библиотеки. Тем не менее, ответ был хорош. Спасибо ! - person XavierBrt; 16.08.2018
comment
Я использовал функцию, чтобы скрыть столбец в файле шаблона, <ngx-datatable-column [cellClass]="showColumn" [width]="20" [flexGrow]="0.5"> в файле кода, showColumn({ row, column, value }) { return (row.status === 'Open') ? ' hideColumn' : ''; } в styles.scss, .hideColumn { display: none !important; } - person Adi; 11.10.2019