极客教程Angular PrimeNG下拉组件
Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式的网站，非常方便。在这篇文章中，我们将知道如何在Angular ngx Bootstrap中使用Dropdown组件。我们还将了解各种属性、事件、方法和造型，以及在代码示例中使用的语法。
Dropdown组件：它用于从给定的项目列表中选择对象。
属性：
- option。它是一个数组对象，代表选择项目，作为可用的选项显示。它是数组的数据类型，默认值为空。
- optionLabel : 它用于给一个选项的标签命名。它是字符串数据类型，默认值是标签。
- optionValue : 它用于给一个选项的值命名，当没有定义时默认为选项本身。它的数据类型是字符串，默认值是value。
- optionGroupLabel : 它被用来给选项组中的一个标签命名。它是字符串数据类型，默认值是标签。
- optionGroupChildren : 它是用来给选项组中的选项字段命名的。它是字符串数据类型，默认值是 item。
- name : 它用于设置输入元素的名称。它是字符串数据类型，默认值为空。
- scrollHeight : 它用于设置视口的高度，单位是像素，如果列表的高度超过这个值，就会定义一个滚动条。它是字符串数据类型，默认值是200px。
- style : 它用于设置元素的内联样式。它是字符串数据类型，默认值为空。
- styleClass : 它用于设置元素的风格类别。它是字符串数据类型，默认值为空。
- filter : 它用于显示一个输入字段，以便在按键时过滤项目。它是布尔数据类型，默认值是false。
- filterValue : 它是一个用这个值显示的过滤器。它是字符串数据类型，默认值为空。
- filterBy :它决定哪一个或哪几个字段（以逗号分隔）来进行搜索。它是字符串数据类型，默认值为空。
- filterMatchMode 。它是用来定义如何过滤项目的。它是字符串数据类型，默认值是包含。
- filterPlaceholder :它用于设置过滤器输入为空时显示的占位符文本。它是字符串数据类型，默认值为空。
- filterLocale : 它用于设置过滤时使用的locale。默认的locale是主机环境的当前locale。它是字符串数据类型，默认值为未定义。
- required : 它指定在提交表单前必须填写一个输入字段。它是布尔数据类型，默认值是false。
- disabled : 它指定该组件应该被禁用。它是布尔数据类型，默认值是false。
- readonly : 它指定该组件不能被编辑。它是布尔数据类型，默认值是false。
- emptyMessage : 它用于设置没有数据时要显示的文本。它的数据类型是字符串。
- emptyFilterMessage : 它用于设置当过滤没有返回任何结果时显示的文本。它的数据类型是字符串。
- ariaLabelledBy :ariaLabelledBy属性建立了组件和标签之间的关系，它的值应该是一个或多个元素ID。它是字符串数据类型，默认值为空。
- 可编辑 : 它用于指定自定义值，而不是使用可编辑输入框输入的预定义选项。它是布尔数据类型，默认值是false。
- maxlength : 它用于指定可编辑输入字段中允许的最大字符数，它是数字数据类型，默认值为空。
- appendTo : 这个属性接收被附加在上面的元素的ID。它接受任何数据类型，默认值为空。
- tabindex : 它用于设置元素在标签顺序中的索引。它是数字数据类型，默认值为空。
- inputId : 这是一个基础输入元素的ID标识符。它是字符串数据类型，默认值为空。
- dataKey : 它是一个属性，用于唯一地识别选项中的一个值。它是字符串数据类型，默认值为空。
- autofocus : 它指定了组件在加载时是否应该自动聚焦。它是布尔数据类型，默认值是false。
- autofocusFilter : 它用于在叠加显示时将焦点应用于过滤器元素。它是布尔数据类型，默认值是false。
- resetFilterOnHide : 它用于在隐藏下拉菜单时清除过滤器的值。它是布尔数据类型，默认值是false。
- dropdownIcon : 它用于设置下拉图标的图标类别。它是字符串数据类型，默认值是pi pi-chevron-down。
- emptyFilterMessage : 它用于设置当过滤没有返回任何结果时显示的文本。它的数据类型是字符串。
- autoDisplayFirst : 用于指定在没有定义占位符且值为空的情况下是否将第一个项目作为标签显示。它是布尔数据类型，默认值为真。
- group : 当提供嵌套选项时，它用于指定是否将选项分组显示。它是布尔数据类型，默认值是false。
- showClear : 它用于显示清除图标，该图标被显示出来以清除数值。它是布尔数据类型，默认值是false。
- baseZIndex : 它用于设置在分层中使用的基础ZIndex值。它是数字数据类型，默认值是0。
- autoZIndex : 它用于指定是否自动管理分层。它是布尔数据类型，默认值为真。
- showTransitionOptions。用来设置显示动画的过渡选项。它是字符串数据类型，默认值是0.12s cubic-bezier（0, 0, 0.2, 1）。
- hideTransitionOptions。它用于设置隐藏动画的过渡选项。它是字符串数据类型，默认值是0.1s线性。
- ariaFilterLabel : 它用于定义一个标签过滤器输入的字符串。它是字符串数据类型，默认值为空。
- tooltip : 它用于显示咨询信息，在悬停时显示在工具提示中。它接受任何数据类型，默认值为空。
- tooltipStyleClass : 它用于设置工具提示的风格类。它是字符串数据类型，默认值为空。
- tooltipPosition : 它用于设置工具提示的位置，有效值是右、左、顶和底。它是字符串数据类型，默认值是顶部。
- tooltipPositionStyle : 它用于设置CSS位置的类型。它是字符串数据类型，默认值是绝对值。
Events:
- onClick。它是一个回调，当组件被点击时被触发。
- onChange。它是一个回调，当下拉菜单的值发生变化时被触发。
- onFilter。它是一个回调，当数据被过滤时被触发。
- onFocus: 它是一个回调，当下拉菜单获得焦点时被触发。
- onBlur: 这是一个回调，当下拉菜单失去焦点时被触发。
- onShow。它是一个回调，当下拉叠加可见时被触发。
- onHide。它是一个回调，当下拉覆盖物被隐藏时被触发。
Methods:
- resetFilter。它用于重置过滤器。
- 焦点：它用于应用焦点。
- 显示。它用于显示面板。
- 隐藏。它用于隐藏面板。
Styling:
- p-dropdown。它是一个风格化的容器元素。
- p-dropdown-clearable。当showClear开启时，它是一个造型容器元素。
- p-dropdown-label。它是一个造型元素，用于显示所选选项的标签。
- p-dropdown-trigger。它是一个风格化的图标元素。
- p-dropdown-panel。它是一个风格化的面板元素。
- p-dropdown-items-wrapper。它是项目列表的一个风格化包装元素。
- p -dropdown-items。它是一个项目的风格化列表元素。
- p-dropdown-item。它是一个列表项。
- p-dropdown-filter-container。它是一个过滤器输入的风格化容器。
- p-dropdown-filter。它是一个风格化的过滤器元素。
- p-dropdown-open。当覆盖层可见时，它是一个风格化的容器元素。
创建Angular应用程序和模块安装。
- 第1步：使用以下命令创建一个Angular应用程序。
ng new appname
- 第2步：在创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
- 第3步：在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构。它将看起来像以下。
例子1：这是一个基本的例子，展示了如何使用下拉组件。
<h2>GeeksforGeeks</h2>
<h5>PrimeNG dropdowm component</h5>
<p-dropdown
[options]="lang"
placeholder="Select a Language"
optionLabel="name"
[showClear]="true">
</p-dropdown>
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html"
})
export class AppComponent {
lang = [
{ name: "HTML" },
{ name: "ReactJS" },
{ name: "Angular" },
{ name: "Bootstrap" },
{ name: "PrimeNG" },
];
}
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 { DropdownModule } from "primeng/dropdown";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
DropdownModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
输出:
例子2：在这个例子中，我们将知道如何在下拉组件中使用editable属性。****
<h2>GeeksforGeeks</h2>
<h5>PrimeNG dropdowm component</h5>
<p-dropdown
[options]='[{name: "Editable1"}, {name: "Editable2"},
{name: "Editable3"}, {name: "Editable4"},
{name: "Editable5"}]'
editable="true"
placeholder="Select a Language"
optionLabel="name"
[showClear]="true">
</p-dropdown>
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class AppComponent {
}
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 { DropdownModule } from "primeng/dropdown";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
DropdownModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
输出:
