Question

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

我怎样才能实现这一目标？我尝试了以下内容 -

p-dataTable

和<p-column *ngFor = "let columnName of columns; let i = index;" field="name" styleClass="{{getStyleClass(i-1)}}">文件中的getStyleClass()功能，但似乎无效。

Answer 1

你可以使用模板：

<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

Answer 2

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

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

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

2 个答案: