Как установить цвет фона для всей ячейки с некоторым элементом в условии, используя PrimeNG

Question

Я пытаюсь установить фон во всей своей ячейке (или во всей строке) в соответствии с моим состоянием, но фон, который он поместил только в мой HTML-элемент.

Я уже пытался поместить некоторый класс вмоя попытка установить отступ 0, я уже пытался поставить некоторые div.

HTML

<p-column header="Motivo"  [style]="{width: '100px', 'text-align': 'center'}">
  <ng-template let-movimento="rowData" pTemplate="body">
   <p [ngClass]="{'motivo-SemEfeito': movimento.motivoDesligamentoId == 2}">
       {{ movimento.motivoDesligamento }}
    </p>
  </ng-template>
</p-column>

CSS

.motivo-SemEfeito {
  text-decoration: line-through;
  background: red;
 }

Answer 1

Как показано в документе NgClass , вы можете поставить условие для вашего класса:

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

Поместите фон в свой класс CSS:

html:

<div [ngClass]="{'red': red, 'blue': !red}">
    <p-column header="Motivo"  [style]="{width: '100px', 'text-align': 'center'}">
      <ng-template let-movimento="rowData" pTemplate="body">
       <p [ngClass]="{'motivo-SemEfeito': movimento.motivoDesligamentoId == 2}">
           {{ movimento.motivoDesligamento }}
        </p>
      </ng-template>
    </p-column>
</div>

css:

.red {
    background: red;
}

ts:

const red = false;

Answer 2

Вы можете попробовать этот способ, используя styleClass

HTML

<p-column header="Motivo"  [styleClass]="methodNameForTheClass(data)">

TS

 methodNameForTheClass(data){
   // write your condion here and return class name as string
   return 'className';
}