极客教程Angular PrimeNG Form MultiSelect Properties组件
Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将知道如何在Angular中使用Dropdown组件Angular PrimeNG Form MultiSelect Properties组件。
多选组件用于向用户提供一个选项列表，其中一个或多个选项可由用户选择。多选组件的属性列举如下。
语法:
<p-multiSelect
[options]="..."
[(ngModel)]="..."
...
defaultLabel="..."
optionLabel="..."
[disabled]="..."
display="...">
</p-multiSelect>
Angular PrimeNG表格多选属性：
- appendTo。它用于定义目标元素来附加叠加。
- ariaFilterLabel。它用于定义标记过滤器输入的字符串。
- label。它用于定义输入的标签，以实现可访问性。
- ariaLabelledBy。它用于定义组件和标签之间的关系，其值应该是一个或多个元素ID。
- autofocusFilter。它用于定义叠加显示时过滤器元素的焦点。
- autoZIndex。它用于定义自动管理图层。
- baseZIndex。它用于定义分层时使用的基础ZIndex值。
- defaultLabel。它用于定义没有选择时要显示的标签。
- dataKey。它用于定义属性以唯一地识别选项中的一个值。
- disabled。它用于指定该元素应被禁用。
- displaySelectedLabel:它用于显示所选项目的标签或使用默认标签。
- dropdownIcon: 它用于定义下拉图标的图标类。
- emptyFilterMessage。它用于定义当过滤没有返回任何结果时要显示的文本。
- filter。它用于显示一个输入字段，以过滤按键时的项目。
- filterMatchMode。它用于定义如何过滤项目。
- filterValue。它用于指定，用这个值来过滤显示。
- filterLocale。它用于定义在过滤中使用的语言环境。
- filterBy。它用于定义要搜索的一个或多个字段（逗号分隔）。
- filterPlaceHolder。它用于定义过滤器输入的占位符。
- hideTransitionOptions。用来定义隐藏动画的过渡选项。
- inputId。它用于定义焦点输入的标识符，以匹配为该组件定义的标签。
- maxSelectedLabels:它用于定义最多显示多少个选定项目的标签。
- name: 它用于定义输入元素的名称。
- option。它用于定义显示为可用选项的对象阵列。
- optionLabel。它用于定义一个选项的标签字段的名称。
- optionValue。它用于定义一个选项的值域的名称。
- optionDisabled。它用于定义一个选项的禁用字段的名称。
- optionGroupLabel。它用于定义一个选项组的标签字段的名称。
- optionGroupChildren。它用于定义一个选项组的选项字段的名称。
- group。当提供嵌套选项时，它用于将选项分组显示。
- overlayVisible。它用于定义指定选项面板的可见性。
- panelStyle。它用于定义覆盖面板的Inline风格。
- placeholder。它用于定义没有选择时要显示的标签。
- readonly：它用于定义规范，使组件不能被编辑。
- emptyMessage。它用于定义没有数据时要显示的文本。
- emptyFilterMessage。它用于定义当过滤没有返回任何结果时要显示的文本。
- resetFilterOnHide。它用于在隐藏下拉菜单时清除过滤器的值。
- scrollHeight：用于定义视口的高度，单位是像素，如果列表的高度超过这个值，就会定义一个滚动条。
- selectedItemsLabel。它用于定义超过最大选定标签后显示的标签。
- selectionLimit：用于定义可以选择的最大选项的数量。
- showHeader。它用于定义是否显示页眉。
- showTransitionOptions。它用于定义显示动画的过渡选项。
- showToggleAll：它用于显示标题处的复选框，以一次性切换所有项目。
- style。它用于定义元素的内联样式。
- styleClass。它用于定义元素的风格类。
- tabindex。它用于定义元素在标签顺序中的索引。
- tooltip: 它用于定义悬停时在工具提示中显示的咨询信息。
- tooltipStyleClass。它用于定义工具提示的风格类别。
- tooltipPosition。它用于定义工具提示的位置，有效值为右、左、顶和底。
- tooltipPositionStyle。它用于定义CSS位置的类型。
- showClear: 它用于定义清除值时显示的清除图标。
- virtualScroll。它用于定义虚拟卷轴。
- virtualScrollItemSize。它用于定义VirtualScrolling的列表中的一个项目的高度。
- virtualScrollOptions。它用于定义滚动器组件的属性，可以像其中的一个对象一样使用。
- lazy：它用于定义数据是否以懒惰的方式加载和交互。
创建Angular应用程序和模块安装。
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步：在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：项目结构将如下所示。
Project Structure
示例1：在下面的代码中，我们将使用上述属性来演示Angular PrimeNG Form MultiSelect Properties组件的使用。
- 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 MultiSelect
Properties Component
</h4>
<h5>Chips</h5>
<p-multiSelect
[options]="cities"
[(ngModel)]="selectedCities"
defaultLabel="Select a City"
optionLabel="name"
display="chip">
</p-multiSelect>
</div>
- app.component.ts:
import { Component } from "@angular/core";
import { PrimeNGConfig } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
cities: any[];
selectedCities: string[] = [];
constructor(private primengConfig: PrimeNGConfig) {
this.cities = [
{ name: "Nallasopara", code: "Nallasopara" },
{ name: "Naigaon", code: "Naigaon" },
{ name: "Mira road", code: "MR" },
{ name: "Vasai", code: "VASAI" },
{ name: "Virar", code: "virar" }
];
}
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 { HttpClientModule }
from '@angular/common/http';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { MultiSelectModule }
from 'primeng/multiselect';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MultiSelectModule,
FormsModule,
HttpClientModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
输出:
例子2：在这个例子中，我们使用Multiselect组件的disabled属性来禁用该组件。
- 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
MultiSelect Properties Component
</h4>
<h5>Basic</h5>
<p-multiSelect
[options]="cities"
[(ngModel)]="selectedCities1"
defaultLabel="Select a City"
optionLabel="name"
[disabled]="true">
</p-multiSelect>
</div>
- app.component.ts:
import { Component } from "@angular/core";
import { PrimeNGConfig } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
cities: any[];
selectedCities1: any[] = [];
constructor(private primengConfig: PrimeNGConfig)
{
this.cities = [
{ name: "Nallasopara", code: "Nallasopara" },
{ name: "Naigaon", code: "Naigaon" },
{ name: "Mira road", code: "MR" },
{ name: "Vasai", code: "VASAI" },
{ name: "Virar", code: "virar" }
];
}
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 { HttpClientModule }
from '@angular/common/http';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { MultiSelectModule }
from 'primeng/multiselect';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MultiSelectModule,
FormsModule,
HttpClientModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
输出:
