PrimeNG:根据某些条件将 styleClass 分配给 p 列
PrimeNG: assigning the styleClass to p-column based on some condition
我想根据条件将 styleClass
分配给 p-dataTable
的 p-header
元素(只有前五列需要特定样式)。
我怎样才能做到这一点?
我尝试了以下 -
<p-column
*ngFor = "let columnName of columns; let i = index;"
field="name"
styleClass="{{getStyleClass(i-1)}}">
和 ts
文件中的 getStyleClass()
函数,但这似乎不起作用。
下面是我如何根据索引分配 class 的示例(更改语法以匹配 NgPrime)。由于您只想应用于前 5 列,因此您可以设置一个条件来检查索引是否小于或等于 5。
<p
*ngFor = "let columnName of columns; let i = index;"
field="name"
[ngClass]="{'nameOfTheCssClass': i <= 5}"></p>
您可以为此使用模板:
<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;
}
我想根据条件将 styleClass
分配给 p-dataTable
的 p-header
元素(只有前五列需要特定样式)。
我怎样才能做到这一点? 我尝试了以下 -
<p-column
*ngFor = "let columnName of columns; let i = index;"
field="name"
styleClass="{{getStyleClass(i-1)}}">
和 ts
文件中的 getStyleClass()
函数,但这似乎不起作用。
下面是我如何根据索引分配 class 的示例(更改语法以匹配 NgPrime)。由于您只想应用于前 5 列,因此您可以设置一个条件来检查索引是否小于或等于 5。
<p
*ngFor = "let columnName of columns; let i = index;"
field="name"
[ngClass]="{'nameOfTheCssClass': i <= 5}"></p>
您可以为此使用模板:
<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;
}