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

Question

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

Answer 1

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

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

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

Answer 2

首先在你的组件中禁用Disable view encapsulation，然后添加样式，

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

然后为你的 p-card 添加一些 getter for ngClass

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

how to style dynamically assign background to p-card of primeng?

javascript

sass

styling

primeng

angular