Primeng 的 [styleClass] 带条件样式

Posted 2023-03-06

【中文标题】Primeng 的 [styleClass] 带条件样式

【英文标题】：Primeng's [styleClass] with conditional styling

【发布时间】：2020-05-11 02:39:00

【问题描述】：

我想在primeng 'p-overlayPanel' 元素上设置条件样式。我试过了：

<p-overlayPanel [styleClass]="#(bean.comment) ? 'style1' : 'style2'">，但它不起作用。 [ng-class]="bean.comment ? 'style1' : 'style2'" - 这也不起作用。

Styleclass 只能在没有这样的条件的情况下工作：

<p-overlayPanel [styleClass]="style1"> // html文件

p-overlayPanel .style1.ui-overlay background-color: yellow; //css文件

虽然 [ng-class] 根本不起作用（但在原版 JS 元素上可以正常工作）。我错过了什么吗？我的问题如下：

'ng-class' 是否不适用于 ngPrime 集合中的某些元素？ 如何正确有条件地为p-overlayPanel 元素应用'styleClass'？ 我正在使用 Angular 8。

【问题讨论】：

这个答案中列出了几个选项，其中一个应该可以工作：***.com/questions/35269179/…。在您的情况下，类型 4 将适用于您： [ngClass]="(step=='step1')?'my-class1':'my-class2'"

这能回答你的问题吗？ Angular: conditional class with *ngClass

@ulmas 这与primeng有关，以及如何更改这些元素的样式，例如添加样式类，然后您可以像我的回答一样更改它们????????

【参考方案1】：

styleClass 接受字符串作为 css 类或类列表，并应用于已经拥有这些类列表的元素 overlaypanel ui-widget ui-widget-content ui-corner-all ui-shadow

所以如果你想改变背景颜色，你必须这样做

.style1.ui-overlaypanel
  background-color: red;


.style2.ui-overlaypanel
  background-color: green;

您必须将类添加到全局样式文件而不是组件样式文件，如果您使用style 属性，则该值将传递给 ngStyle 指令。

demo ?

? overlaypanel.ts

更新了?

您可以使用ngClass，但样式必须像下面的示例一样更改，因为现在css类将直接应用于元素。

.style1 .ui-overlaypanel
  background-color: red;


.style2 .ui-overlaypanel
  background-color: green;

demo ?

【参考方案2】：

你可以像这样使用 [ngClass]：

<input pInputText [ngModel]="vendor.iban" name="pIban" #pIban="ngModel" (click)="some(pIban)" class="col-md-7 ui-inputtext ui-widget ui-state-default ui-corner-all "  [ngClass]="'errorVendor': vendor.iban=='' && pIban.touched"  />