Angular PrimeNG Form Listbox自定义内容组件

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将看到Angular PrimeNG中的Form Listbox自定义内容组件。

ListBox组件用于制作一个列表组件，我们可以从中选择一个或多个项目，如果该项目不需要，也可以在列表中取消勾选而放弃。自定义内容有助于定义名为ng-template的item，其中本地ng-template变量是指选项集合中的一个选项。自定义页眉和页脚可以在页眉、过滤器和页脚模板的帮助下额外地促进。

语法:

<p-listbox [options]="..." 
[(ngModel)]="..." 
[multiple]="true" 
optionLabel="name" 
filterBy="label" 
[listStyle]="{''}">
   <ng-template pTemplate="...">
       ...
   </ng-template>
</p-listbox>

Angular PrimeNG Form Listbox自定义内容属性：

option。它是一个数组，代表选择项，作为可用选项显示，它是数组数据类型，默认值为空。
multiple：它用于允许选择多个值。它是布尔数据类型，默认值是false。
optionLabel。它用于给出一个选项的标签，它是字符串数据类型，默认值是标签。
filterBy。它被用来指定用这个值进行过滤显示。它是字符串数据类型。
listStyle。它用于设置列表元素的内联样式，它是字符串数据类型，默认值为null。

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

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

ng new appname

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

cd appname

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

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

项目结构：安装成功后，将出现以下项目结构。

Angular PrimeNG Form Listbox自定义内容组件

示例1：本示例描述了Angular PrimeNG中的Form Listbox Custom Content Component的基本用法。

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 
        Custom Content Component
    </h4>
    <p-listbox [options]="cities" 
               [(ngModel)]="selectedCityCode"
               optionLabel="name" 
               [filter]="true">
        <ng-template pTemplate="header">
            Header Content
        </ng-template>
    </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: 'MUM' },
            { name: 'Varanasi', code: 'VAR' },
            { name: 'Jabalpur', code: 'JAB' },
            { name: 'Nashik', code: 'NK' },
            { name: 'Vasai', code: 'VAS' },
        ];
    }
    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';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ListboxModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

Angular PrimeNG Form Listbox自定义内容组件

示例2：本示例描述了Angular PrimeNG中Form Listbox Custom Content Component的基本用法，即禁用输入字段。

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
        Custom Content Component
      </h4>
    <p-listbox [options]="cities" 
               [(ngModel)]="selectedCityCode" 
               optionLabel="name" 
               [filter]="true" 
               disabled="true">
        <ng-template pTemplate="header">
            Header Content 
        </ng-template>
    </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: 'MUM' },
            { name: 'Varanasi', code: 'VAR' },
            { name: 'Jabalpur', code: 'JAB' },
            { name: 'Nashik', code: 'NK' },
            { name: 'Vasai', code: 'VAS' },
        ];
    }
  
    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';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ListboxModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

Angular PrimeNG Form Listbox自定义内容组件