Angular PrimeNG表格评级属性组件

Angular PrimeNG是一个用于Angular应用程序的UI组件库。它为各种任务提供了许多预建的主题和UI组件，如输入、菜单、图表、按钮等。在这篇文章中，我们将Angular PrimeNG表单评级属性组件。

表格评分组件是一个基于星星图标的选择输入。它通常可以在电子商务网站的产品页面上看到，如Amazon, Flipkart, Alibaba等。表单评级组件的属性列举如下。

Angular PrimeNG形式评级属性：

stars。这是用来指定星星数量的属性。
cancel。这是一个布尔属性，当设置为 “真 “时，会显示一个机会图标来重置当前的评级。
disabled:当指定时，这个布尔属性将禁用评级组件。
readonly:这是一个布尔属性，当它被指定时，评级组件是只读的，并且不可能改变其值。
iconOnClass。它是图标上的风格类别。默认值是 “pi pi-star-fill”。
iconOffClass。它是关闭图标的风格类别。默认值是 “pi pi-star”。
iconCancelClass。它是取消图标的风格类别。默认值是 “pi pi-ban”。
iconOnStyle。它是on-icon的内联风格。
iconOffStyle。它是离线图标的内联风格。
iconCancelStyle。它是取消图标的内联风格。

语法:

<p-rating 
    [stars]="..."
    [cancel]="..."

    [disabled]="true | false"

    [readOnly]="true | false"

    ...
    [(ngModel)]="...">
</p-rating>

创建Angular应用程序并安装模块：

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Angular PrimeNG表格评级属性组件

Project Structure

例子1：在这篇文章中，我们使用了评级组件的星级属性，只显示3颗星，并使用readOnly属性使评级输入为只读。

app.component.html

<h2 style="color: green">
    GeeksforGeeks
</h2>
<h3>
    Angular PrimeNG Form
    Rating Properties Component
</h3>
  
<h4>Rating with 3 stars</h4>
<p-rating [stars]="3" [(ngModel)]="rateValue1">
</p-rating>
  
<h4>ReadOnly Rating with 4 stars</h4>
<p-rating [stars]="4" [readonly]="true" 
          [(ngModel)]="rateValue2">
</p-rating>

app.component.ts

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    rateValue1: number = 0;
    rateValue2: number = 2;
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { RatingModule } from 'primeng/rating';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        RatingModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG表格评级属性组件

示例2：在这个例子中，我们使用iconCancelClass来改变取消按钮的图标，并使用disabled属性来禁用评级输入。

app.component.html

<h2 style="color: green">
    GeeksforGeeks
</h2>
<h3>
    Angular PrimeNG Form
    Rating Properties Component
</h3>
  
<h4>Rating with Custom Cancel Icon</h4>
<p-rating [stars]="3" iconCancelClass="pi pi-times" 
          [(ngModel)]="rateValue1">
</p-rating>
  
<h4>Disabled Rating</h4>
<p-rating [stars]="4" [readonly]="true"
          [(ngModel)]="rateValue2">
</p-rating>

app.component.ts

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    rateValue1: number = 0;
    rateValue2: number = 0;
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { RatingModule } from 'primeng/rating';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        RatingModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG表格评级属性组件