在primeng中对p评级的不同颜色

Question

我正在尝试为星星着色并且在 .html 中有多个p-rating ，并尝试将不同的颜色应用于同一组件中的不同p-rating 。

如何使用 Primeng 或 Angular 方式为星星设计样式。

.html

<p-rating [ngModel]="inputData?.rating" readonly="true" stars="5"[cancel]="false" style="float: left;font-size: 35px !important;color: #4741fa!important;">
    </p-rating>
    <p-rating [ngModel]="inputData?.rating" readonly="true" stars="5"[cancel]="false" style="float: left;font-size: 35px !important;color: #000000!important;">
    </p-rating>
    <p-rating [ngModel]="inputData?.rating" readonly="true" stars="5"[cancel]="false" style="float: left;font-size: 35px !important;color: #4743fb!important;">
    </p-rating>

.css

.ui-rating-icon {
    font-size: 15px !important;
    color: #ffab18 !important;
}

Answer 1

在primeng 9中你可以使用这个属性来绑定样式，

[iconOnStyle]="{'color':'#4743fb'}"

Answer 2

组成部分应该是这样的：

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

您必须添加封装以更改样式