Angular PrimeNG Form Listbox Properties组件

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将看到如何在Angular PrimeNG中使用表单列表框属性组件。

ListBox组件用于制作一个列表组件，我们可以从中选择一个或多个项目，如果该项目不需要，也可以通过在列表中取消勾选来丢弃。由Angular PrimeNG促成的各种列表框属性组件，描述如下。

Angular PrimeNG表单列表框属性：

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

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

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

ng new appname

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

cd appname

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

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

Project Structure:

Angular PrimeNG Form Listbox Properties组件

示例1：在下面的代码示例中，我们将使用上述属性来演示表单列表框属性组件的使用。

app.component.html

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
          Angular PrimeNG Form Listbox
          Properties Component
     </h4>
    <p-listbox [options]="cities" 
               [(ngModel)]="selectedCityCode" 
               optionLabel="name">
    </p-listbox>
</div>

app.component.ts

import { Component } from "@angular/core";
import { PrimeNGConfig, SelectItemGroup } 
    from "primeng/api";
interface City {
    name: string;
    code: string;
}
  
interface Country {
    name: string;
    code: string;
}
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
      :host ::ng-deep .ui-listbox {
        width: 20em;
      }
    `
    ]
})
export class AppComponent {
    cities: City[];
  
    countries: any[];
  
    selectedCity: City;
  
    selectedCountries: any[];
  
    groupedCities: SelectItemGroup[];
  
    constructor(private primengConfig: PrimeNGConfig) {
        this.cities = [
            { name: "Mumbai", code: "IND" },
            { name: "Varanasi", code: "RM" },
            { name: "Jabalpur", code: "LDN" },
            { name: "Nashik", code: "IST" },
            { name: "Vasai", code: "PRS" }
        ];
    }
  
    ngOnInit() {
        this.primengConfig.ripple = true;
    }
}

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

输出:

Angular PrimeNG Form Listbox Properties组件

示例2：在下面的代码示例中，我们将使用上述属性来演示表单列表框属性组件的使用。

app.component.html

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Form Listbox
        Properties Component
    </h4>
    <p-listbox [options]="cities" 
               [(ngModel)]="selectedCityCode" 
               optionLabel="name"
               disabled="true">
    </p-listbox>
</div>

app.component.ts

import { Component } from "@angular/core";
import { PrimeNGConfig, SelectItemGroup }
    from "primeng/api";
interface City {
    name: string;
    code: string;
}
  
interface Country {
    name: string;
    code: string;
}
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
      :host ::ng-deep .ui-listbox {
        width: 20em;
      }
    `
    ]
})
export class AppComponent {
    cities: City[];
  
    countries: any[];
  
    selectedCity: City;
  
    selectedCountries: any[];
  
    groupedCities: SelectItemGroup[];
  
    constructor(private primengConfig: PrimeNGConfig) {
        this.cities = [
            { name: "Mumbai", code: "IND" },
            { name: "Varanasi", code: "RM" },
            { name: "Jabalpur", code: "LDN" },
            { name: "Nashik", code: "IST" },
            { name: "Vasai", code: "PRS" }
        ];
    }
  
    ngOnInit() {
        this.primengConfig.ripple = true;
    }
}

app.mosule.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';
import { ButtonModule } from 'primeng/button';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ListboxModule,
        ButtonModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

Angular PrimeNG Form Listbox Properties组件