Angular PrimeNG 列表框组件

Angular PrimeNG 是一个开源框架，具有丰富的原生 Angular UI 组件集，可用于出色的样式，并且该框架用于非常轻松地制作响应式网站。在本文中，我们将了解如何在 Angular PrimeNG 中使用 ListBox 组件。

ListBox 组件：它 用于制作一个列表组件，我们可以从中选择一个或多个项目，如果在列表中取消选中该项目，也可以将其丢弃。

特性：

• ariaFilterLabel ：它用于定义一个字符串，用于标记输入过滤器元素。它是字符串数据类型，默认值为空。
• 复选框：用于允许选择带有复选框的项目。它是布尔数据类型，默认值为false。
• dataKey ：它是用于标识选项的属性。它是字符串数据类型，默认值为空。
• disabled ：它指定元素应该被禁用。它是布尔数据类型，默认值为false。
• filter ：用于在标题处显示过滤器输入。它是布尔数据类型，默认值为false。
• filterMatchMode ：用于定义如何过滤项目。它是字符串数据类型，包含默认值。
• filterValue ：用于指定具有此值的过滤器显示。它是字符串数据类型，默认值为空。
• filterLocale ：用于设置过滤时使用的语言环境。它是字符串数据类型，默认值未定义。
• filterPlaceHolder ：用于定义过滤器输入的占位符。它是字符串数据类型，默认值为空。
• listStyle ：用于设置列表元素的内联样式，为字符串数据类型，默认值为null。
• listStyleClass ：用于设置列表元素的Style类，为字符串数据类型，默认值为null。
• metaKeySelection ：用于定义如何选择多个项目。它是布尔数据类型，默认值为true。
• 多个：用于允许选择多个值。它是布尔数据类型，默认值为false。
• readonly ：它指定元素值不能更改。它是布尔数据类型，默认值为false。
• emptyMessage ：用于设置没有数据时显示的文本。它是字符串数据类型，默认值是没有找到记录。
• emptyFilterMessage ：用于设置过滤不返回任何结果时显示的文本，为字符串数据类型，默认值为未找到记录。
• options : 它是一个数组，表示选择项显示为可用选项，它是数组数据类型，默认值为 null。
• optionLabel ：用于给出选项的标签，它是字符串数据类型，默认值为标签。
• optionValue ：用于给出选项的值，未定义时默认为选项本身。它是字符串数据类型，默认值为value。
• optionGroupLabel ：用于为选项组提供标签。它是字符串数据类型，默认值为标签。
• optionGroupChildren ：用于获取选项组的选项字段的名称。它是字符串数据类型，默认值为一个项目。
• group ：用于设置在提供嵌套选项时是否将选项显示为分组。它是布尔数据类型，默认值为false。
• showToggleAll ：用于设置标题复选框是否以多种模式显示。它是布尔数据类型，默认值为true。
• style ：用于设置元素的内联样式。它是字符串数据类型，默认值为空。
• styleClass ：用于设置元素的样式类。它是字符串数据类型，默认值为空。

事件：

• onChange ：当列表框的值改变时触发的回调。
• onDblClick ：它是在双击项目时触发的回调。
• onClick ：这是一个回调，当 Listbox 选项单击时触发。

造型：

• p-listbox：用于元素的容器。
• p-listbox-list ：它用作列表的容器。
• p-listbox-item：用于保存列表中的项目。
• p-listbox-header ：用于显示元素的标题。
• p-listbox-filter-container ：它是标题中过滤器输入的容器。

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

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

  ng new appname

• 第 2 步：创建项目文件夹（即 appname）后，使用以下命令移动到该文件夹。

  cd appname

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

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

项目结构：完成上述过程后，将如下所示。

示例 1：这是展示如何使用 ListBox 组件的基本示例。  

app.component.html

GeeksforGeeks
PrimeNG ListBox component

app.module.ts

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 { ListboxModule } from "primeng/listbox";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            ListboxModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import { Component } from "@angular/core";
import { PrimeNGConfig, SelectItemGroup } from "primeng/api";
  
interface Course {
  name: string;
}
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styles: [],
})
export class AppComponent {
  gfg: Course[];
  selectedCourse: Course;
  
  constructor(private primengConfig: PrimeNGConfig) {
    this.gfg = [
      { name: "HTML5" },
      { name: "JavaScript" },
      { name: "Java" },
      { name: "ReactJS" },
      { name: "AngularJS" },
    ];
  }
}

输出：

示例 2：在本示例中，我们将创建一个动态列表框组。

app.component.html

GeeksforGeeks
PrimeNG ListBox Component

app.module.ts

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

app.component.ts

import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
interface Course {
  name: string;
}
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  gfg: any[];
  
  constructor(private primengConfig: PrimeNGConfig) {
    this.gfg = [
      { name: 'AngularJS' },
      { name: 'ReactJS' },
      { name: 'Java' },
      { name: 'JavaScript' },
      { name: 'HTML' },
      { name: 'PrimeNG' },
      { name: 'Bootstrap' }
    ];
  }
  
  ngOnInit() {
    this.primengConfig.ripple = true;
  }
}

输出：

参考： https://primefaces.org/primeng/showcase/#/listbox