Angular PrimeNG Form 列表框的事件组件

Angular PrimeNG是一个由PrimeFaces开发和维护的UI组件库。它被世界各地的Angular开发人员广泛用于使用AngularJS开发快速和可扩展的Web应用程序。在这篇文章中，我们将看到**Angular PrimeNG表单列表框事件组件。

列表框组件是用来为用户提供一个选项列表，其中可以选择一个或多个选项。当用户以特定方式与列表框组件交互时，列表框会触发一些事件。这些事件列举如下。

Angular PrimeNG Form Listbox Events：

onChange。这接受一个回调函数，当列表框的值改变时调用。
onDblClick:这接受一个回调函数，当一个项目被双击时调用。
onClick。这接受一个回调函数，当列表框选项被点击时调用。

Angular PrimeNG表单列表框属性：

option。这接受一个对象数组，作为列表框项目显示。
optionLabel。这是传递给options属性的对象的一个属性，用于显示ListBox选项的标签。
styleClass。它是组件的样式类。
multiple: 当这个属性被设置为true时，用户可以选择多个选项。
checkbox。该属性用于在列表框组件处于多种模式时向用户显示复选框。
showToggleAll：它指定了在”multiple”属性设置为 “true “的情况下，是否在列表的顶部显示切换所有复选框。

语法:

<p-listbox
**(event-name)="callbackToInvoke()"**

    [options]="..." 
    [(ngModel)]="..."
    ... 
    optionLabel="...">
</p-listbox>

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

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

ng new myapp

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

cd myapp

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

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

项目结构：完成上述步骤后，其结构将如下所示。

Angular PrimeNG Form Listbox Events组件

Project Structure

例子1：这个例子说明了ListBox组件的onChange和onClick事件的使用。当这些事件中的任何一个被触发时，将显示一条祝酒词。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Listbox Events Component</h3>
  
<p-listbox
    (onChange)="listboxChange()"
    (onClick)="listboxClick()"
    styleClass="listbox1"
    [options]="sports" 
    [(ngModel)]="chosenSport" 
    optionLabel="name">
  
    <ng-template pTemplate="header">
        Select a Sport - GFG
    </ng-template>
</p-listbox>
  
<p-toast></p-toast>

app.component.ts:

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
  
interface Sport {
    name: string;
    rating: number;
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private mService: MessageService) { }
    sports: Sport[] = [];
    chosenSport?: Sport;
  
    ngOnInit() {
        this.sports = [
            {
                name: "Cricket",
                rating: 5
            },
            {
                name: "Hockey",
                rating: 4
            },
            {
                name: "VolleyBall",
                rating: 4
            },
            {
                name: "FootBall",
                rating: 3
            },
            {
                name: "Badminton",
                rating: 4
            }
        ];
    }
  
    listboxChange() {
        this.mService.add({
            severity: "success",
            summary: "ListBox Value Changed",
            detail: "onChange Event Triggered"
        })
    }
  
    listboxClick() {
        this.mService.add({
            severity: "info",
            summary: "ListBox Option Clicked",
            detail: "onClick 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 { ListboxModule } from 'primeng/listbox';
import { ToastModule } from 'primeng/toast';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ListboxModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Form Listbox Events组件

例子2：在这个例子中，我们使用ListBox组件的onDblClick事件，每当一个列表框项目被双击时，就会显示一条祝酒词。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Listbox Events Component</h3>
  
<p-listbox
    (onDblClick)="listboxDblClick()"
    styleClass="listbox1"
    [multiple]="true"
    [options]="courses" 
    [checkbox]="true"
    [showToggleAll]="false"
    [(ngModel)]="chosenCourses" 
    optionLabel="name">
  
    <ng-template pTemplate="header">
        Select a Course - GFG
    </ng-template>
</p-listbox>
  
<p-toast></p-toast>

app.component.ts:

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
  
interface Course {
    name: string;
    rating: number;
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private mService: MessageService) { }
    courses: Course[] = [];
    chosenCourses?: Course[];
  
    ngOnInit() {
        this.courses = [
            {
                name: "Self Paced DSA",
                rating: 5
            },
            {
                name: "HTML Basic",
                rating: 4
            },
            {
                name: "ReactJS",
                rating: 5
            },
            {
                name: "Competitive Programming",
                rating: 4
            },
            {
                name: "Full Stack Development",
                rating: 4
            }
        ];
    }
  
    listboxDblClick() {
        this.mService.add({
            severity: "info",
            summary: "ListBox Item DoubleClicked",
            detail: "onDblClick 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 { ListboxModule } from 'primeng/listbox';
import { ToastModule } from 'primeng/toast';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ListboxModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Form Listbox Events组件