Angular PrimeNG ListBox组件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，这些组件被用来做很好的造型，这个框架被用来做响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用ListBox组件。

ListBox组件：它用于制作一个列表组件，我们可以从中选择一个或多个项目，如果该项目不需要，也可以在列表中取消勾选而放弃。

属性:

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

事件:

onChange : 它是一个回调，当列表框的值发生变化时被触发。
onDblClick : 它是一个回调，当一个项目被双击时被触发。
onClick : 它是一个回调，当列表框选项点击时被触发。

样式:

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

项目结构 。在完成上述过程后，它将看起来像如下。

Angular PrimeNG ListBox组件

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

<h2>GeeksforGeeks</h2>
<h5>PrimeNG ListBox component</h5>
<p-listbox
  [options]="gfg"
  [(ngModel)]="selectedCourse"
  optionLabel="name"
  [style]="{'width':'15rem'}">
</p-listbox>

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 {}

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" },
    ];
  }
}

输出:

Angular PrimeNG ListBox组件

实例2：在这个例子中，我们将制作一个动态的listBox组。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG ListBox Component</h5>
<p-listbox [options]="gfg" [checkbox]="true" 
           [filter]="true" [multiple]="true" 
           optionLabel="name">
</p-listbox>

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 {}

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;
  }
}

输出:

Angular PrimeNG ListBox组件