如何为primeng的p卡动态分配背景样式？

【问题标题】：how to style dynamically assign background to p-card of primeng?如何为primeng的p卡动态分配背景样式？
【发布时间】：2021-01-04 15:57:18
【问题描述】：

我必须根据状态为 p-card (of primeng) 分配背景。示例：红色表示状态失败，黄色表示警告，绿色表示成功。

【问题讨论】：

标签： javascript angular sass primeng styling

【解决方案1】：

我想到的一种方法是使用样式属性。 p-card 的 style 属性需要一个对象。所以如果我们操纵那个对象，我们可以改变背景颜色。

<p-card header="Simple Card" [style]="styleOBJ">
    some text
</p-card>

// in .ts file
styleOBJ = {'background':'lightblue'}
if(status == 'success') {
    styleOBJ = {'background':'green'}
} else ...

【讨论】：

【解决方案2】：

首先在你的组件中禁用禁用视图封装，然后添加样式，

@Component({
 selector: 'my-component',
 templateUrl: './app/components/my.html',
 styleUrls: ['./app/components/my.css'],
 encapsulation: ViewEncapsulation.None
})

然后在你的 p-card 中添加一些 ngClass 的 getter

【讨论】：