Primeng 的 [styleClass] 具有条件样式

Question

我想在 primeng 'p-overlayPanel' 元素上放置条件样式。我努力了：

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

Styleclass 仅在没有条件的情况下才有效，如下所示：

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

• p-overlayPanel .style1.ui-overlay { background-color: yellow; }// CSS 文件

虽然 [ng-class] 根本不起作用（但在普通 JS 元素上工作得很好）。我错过了什么吗？我的问题如下：

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

Answer 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 指令。

演示

覆盖面板.ts

更新

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

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

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

演示