Angular PrimeNG评级组件

Angular PrimeNG是一个开源框架，它拥有丰富的原生Angular UI组件，这些组件被用来做伟大的造型，这个框架被用来制作响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用Rating组件。让我们了解一下属性、事件和样式，以及代码中会用到的语法。

评级组件：它用于表示用户给出的评级。

属性:

stars:它表示要显示的星星的数量。它是数字数据类型，默认值是5。
cancel:它显示一个取消图标，重置所有的星值。它是布尔数据类型，默认值为真。
disabled:当它被设置为真时，评级应该被禁用。它是布尔数据类型，默认值是false。
readonly:我们不能改变该组件的值。它是布尔数据类型，默认值是false。
iconOnClass。它用于设置 “开启 “图标的类别。它是字符串数据类型，默认值是ππ星。
iconOffClass。它用于设置 “关闭 “图标的类别。它是字符串数据类型，默认值是ππ星。
iconCancelClass。它用于设置 “取消 “图标的类别。它是字符串数据类型，默认值是pi pi-ban。
iconOnStyle。它用于设置 “开启 “图标的内联样式。它是对象数据类型，默认值为空。
iconOffStyle。它用于设置 “关闭 “图标的内联样式。它是一个对象数据类型，默认值为空。
iconCancelStyle。它用于设置 “取消 “图标的内联样式。它是对象数据类型，默认值为空。

事件:

onRate。它是一个回调，在速率变化时被触发。
onCancel：它是一个回调，当值被删除时被触发。

样式:

p-rating。它是一个容器元素。
p-rating-star。它是一个明星元素。
p-rating-star-on。它显示选定的星形元素。
p-rating-cancel: 它显示取消图标。

创建Angular应用程序和模块安装。

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

ng new appname

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

cd appname

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

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

项目结构。它将看起来像以下。

Angular PrimeNG评级组件

例子1：这是一个基本的例子，展示了如何使用评级组件。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Rating component</h5>
<p-rating [cancel]="false"></p-rating>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {}

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

输出:

Angular PrimeNG评级组件

例子2：在这个例子中，我们将知道如何在Rating组件中使用取消属性。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Rating component</h5> 
<p-rating cancel='true'></p-rating>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {}

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

输出:

Angular PrimeNG评级组件

例子3：在这个例子中，我们将知道如何在Rating组件中使用readOnly属性。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Rating component</h5>
<p-rating readonly="true" cancel="true"></p-rating>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {}

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

输出:

Angular PrimeNG评级组件