Angular PrimeNG 下拉组件

PrimeNG 是一个常用的 Angular UI 组件库，提供了丰富的 UI 组件以及操作和动画效果，包括下拉组件，表单验证，布局和轮播图等。本文将主要介绍 PrimeNG 中的下拉组件。

安装

确保您已经安装了 Angular，然后您可以通过以下命令使用 npm 安装 PrimeNG：

npm install primeng --save

同时还需要安装 PrimeIcons：

npm install primeicons --save

在 app.module.ts 中添加下列代码：

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {DropdownModule} from 'primeng/dropdown';
import {AppComponent} from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        DropdownModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

基本用法

在 HTML 文件中配置 p-dropdown 组件即可，例如：

<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>

其中，options 为一个对象数组，ngModel 可以实现双向绑定。如下所示：

import {Component} from '@angular/core';

interface City {
    name: string;
    code: string;
}

@Component({
    selector: 'app-root',
    template: `
        <p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>
        <br>
        <span>你选择的城市为：{{selectedCity.name}}</span>
    `
})
export class AppComponent {
    selectedCity: City = null;
    cities: City[] = [
        {name: '北京', code: 'BJS'},
        {name: '上海', code: 'SH'},
        {name: '广州', code: 'GZ'},
        {name: '深圳', code: 'SZ'},
        {name: '杭州', code: 'HZ'}
    ];
}

属性

options

options 为下拉列表中的选项。它是一个对象数组。

<p-dropdown [options]="cities"></p-dropdown>

cities: City[] = [
    {name: '北京', code: 'BJS'},
    {name: '上海', code: 'SH'},
    {name: '广州', code: 'GZ'},
    {name: '深圳', code: 'SZ'},
    {name: '杭州', code: 'HZ'}
];

placeholder

placeholder 为下拉组件的占位字符串。

<p-dropdown [options]="cities" placeholder="请选择"></p-dropdown>

disabled

disabled 用于禁用下拉组件。

<p-dropdown [options]="cities" [disabled]="true"></p-dropdown>

filter

filter 为下拉框中数据项的搜索框开关。

<p-dropdown [options]="cities" [filter]="true"></p-dropdown>

filterBy

filterBy 用于过滤下拉列表中显示的属性。

<p-dropdown [options]="cities" filterBy="name"></p-dropdown>

panelStyle & panelStyleClass

panelStyle 和 panelStyleClass 用于定制下拉框面板的样式。

<p-dropdown [options]="cities" panelStyleClass="my-custom-class" panelStyle="{backgroundColor:'#f7f7f7'}"></p-dropdown>

autoClear

autoClear 用于在选择后将下拉列表自动清空。

<p-dropdown [options]="cities" autoClear="true"></p-dropdown>

appendTo

appendTo 用于将下拉框面板附加到特定的元素上。

<p-dropdown [options]="cities" appendTo="body"></p-dropdown>

dataKey

dataKey 为数据项的唯一标识符。

<p-dropdown [options]="cities" dataKey="code"></p-dropdown>

dropdownIcon

dropdownIcon 用于更改下拉图标。

<p-dropdown [options]="cities" dropdownIcon="pi pi-caret-down"></p-dropdown>

optionDisabled

optionDisabled 用于禁用某些特定数据项。

<p-dropdown [options]="cities" [optionDisabled]="(city: City) => city.name === '上海'"></p-dropdown>

optionLabel

optionLabel 用于自定义下拉框数值。

<p-dropdown [options]="cities" optionLabel="name | uppercase"></p-dropdown>

optionValue

optionValue 用于自定义下拉框数值对应的值。

<p-dropdown [options]="cities" optionLabel="name | uppercase" optionValue="code"></p-dropdown>

事件

onChange

onChange 事件在选定选项时触发。

<p-dropdown [options]="cities" (onChange)="selectedCity=$event.value"></p-dropdown>

onChange(event: { originalEvent: Event, value: any }) {
    console.log('你选择的城市为：', event.value);
}

onFocus & onBlur

focus 事件在下拉框获得焦点时触发，blur 事件在失去焦点时触发。

<p-dropdown [options]="cities" (onFocus)="onFocusHandler($event)" (onBlur)="onBlurHandler($event)"></p-dropdown>

onFocusHandler(event: Event) {
    console.log('下拉框获得了焦点。');
}

onBlurHandler(event: Event) {
    console.log('下拉框失去了焦点。');
}

结语

总的来说，PrimeNG 的下拉组件非常好用，可以很轻松地实现数据的下拉选择。除了提供大量属性和方法外，还是非常容易上手的。如果你想尝试更多的 PrimeNG 组件，请将其导入你的项目并开始使用。