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

您可以使用styleClass

尝试这种方式

HTML

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

TS

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

Answer 2

如the document of 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;

如何使用PrimeNG

2 个答案: