Primeng 的 [styleClass] 带条件样式答案

【问题标题】：Primeng's [styleClass] with conditional stylingPrimeng 的 [styleClass] 带条件样式
【发布时间】：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。

【问题讨论】：

这个答案中列出了几个选项，其中一个应该可以工作：stackoverflow.com/questions/35269179/…。在您的情况下，类型 4 将适用于您： [ngClass]="(step=='step1')?'my-class1':'my-class2'"
这能回答你的问题吗？ Angular: conditional class with *ngClass
@ulmas 这与primeng有关，以及如何更改这些元素的样式，例如添加样式类，然后您可以像我的回答一样更改它们????????

标签： css angular 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}"  />

【讨论】：