PrimeNG：根据某些条件将 styleClass 分配给 p 列

Question

我想根据条件将 styleClass 分配给 p-dataTable 的 p-header 元素（只有前五列需要特定样式）。

我怎样才能做到这一点？我尝试了以下 -

<p-column 
    *ngFor = "let columnName of columns; let i = index;" 
    field="name" 
    styleClass="{{getStyleClass(i-1)}}">

和 ts 文件中的 getStyleClass() 函数，但这似乎不起作用。

Answer 1

下面是我如何根据索引分配 class 的示例（更改语法以匹配 NgPrime）。由于您只想应用于前 5 列，因此您可以设置一个条件来检查索引是否小于或等于 5。

  <p 
    *ngFor = "let columnName of columns; let i = index;" 
    field="name" 
    [ngClass]="{'nameOfTheCssClass': i <= 5}"></p>

Answer 2

您可以为此使用模板：

<p-column *ngFor="let col of cols; let i=index" [field]="col.field" [header]="col.header" [ngClass]="{'aze': true}">
  <template let-col let-data="rowData" pTemplate="body">
    <span [ngClass]="getStyleClass(i)">{{ data[col.field] }} {{col.id}}</span>
  </template>
</p-column>

TS

getStyleClass(id) {
 if(id<2) {
  return 'customClass'+id;
 }
 return '';

}

CSS

.customClass0 {
  color: blue;
}

.customClass1 {
  color: green;
}

见Plunker

PrimeNG：根据某些条件将 styleClass 分配给 p 列

PrimeNG: assigning the styleClass to p-column based on some condition

angular

primeng

primeng-datatable