极客教程Angular PrimeNG表格评级事件组件
Angular PrimeNG是一个用于Angular应用程序的UI组件库。它为各种任务提供了许多预建的主题和UI组件，如输入、菜单、图表、按钮等。在这篇文章中，我们将看到Angular PrimeNG表格评级事件组件。
表格评分组件是一个基于星星图标的选择输入。它通常可以在电子商务网站的产品页面上看到，如Amazon, Flipkart, Alibaba等。表格评级组件的事件列举如下。
Angular PrimeNG形式评级事件：
- onRate。这个事件接受一个回调函数，当评级值改变时，回调函数会被调用。
- onCancel。这个事件接受一个回调函数，当评级值被删除时，回调函数会被调用。
Angular PrimeNG形式评级属性：
- stars。这个属性指定了评级组件中的星星总数。
- cancel。此属性指定是否显示一个取消图标来删除评级。
- disabled:当存在时，此属性禁用评级组件。
- readOnly:当存在时，这个属性使处理只读，即它不能被改变。
- iconOnClass。这是该图标的风格类别。默认值是 “pi pi-star-fill”。
- iconOffClass。它是关闭图标的风格类别。默认值是 “pi pi-star”。
- iconCancelClass。它是取消图标的风格类别。默认值是 “pi pi-ban”。
- iconOnStyle。它是图标的内联风格。默认值为空。
- iconOffStyle。它是关闭图标的内联风格。默认值为空。
- iconCancelStyle。它是取消图标的内联风格。默认值为空。
语法:
<p-rating
[stars]="..."
(event-name)="callbackFunction()"
[(ngModel)]="...">
</p-rating>
创建Angular应用程序并安装模块：
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步：最后，在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：在完成上述步骤后，项目结构将看起来像这样。
Project Structure
例子1：这个例子说明了评级组件的onRate事件的使用。每当评级值发生变化时，就会显示一个带有更新的评级值的烤面包。
app.component.html
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>
Angular PrimeNG Form
Rating Events Component
</h3>
<p-rating [stars]="5"
(onRate)="handleOnRate($event)"
[(ngModel)]="rateValue">
</p-rating>
<p-toast></p-toast>
app.component.ts
import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [MessageService],
})
export class AppComponent {
constructor(private ms: MessageService) { }
rateValue: number = 0;
handleOnRate(ev: any) {
this.ms.add({
severity: 'success',
summary: 'Rating Changed',
detail: 'New Value: ' + ev.value,
});
}
}
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 { ToastModule } from 'primeng/toast';
import { RatingModule } from 'primeng/rating';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
RatingModule,
ToastModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
例子2：在这个例子中，我们使用Angular PrimeNG提供的Rating组件的onCancel事件，在评级被删除时显示祝酒词。
app.component.html
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>
Angular PrimeNG Form
Rating Events Component
</h3>
<p-rating [stars]="5"
(onCancel)="handleOnCancel()"
[(ngModel)]="rateValue">
</p-rating>
<p-toast></p-toast>
app.component.ts
import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [MessageService],
})
export class AppComponent {
constructor(private ms: MessageService) { }
rateValue: number = 0;
handleOnCancel() {
this.ms.add({
severity: 'error',
summary: 'Rating Removed',
detail: 'onCancel Event Triggered',
});
}
}
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 { ToastModule } from 'primeng/toast';
import { RatingModule } from 'primeng/rating';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
RatingModule,
ToastModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
