极客教程Angular PrimeNG Form MultiSelect Grouped Component
PrimeNG是一个由PrimeFaces开发的AngularJS组件库。它为开发者提供了从一系列已经实现的主题和UI组件中为他们的应用程序进行选择。在这篇文章中，我们将看到Angular PrimeNG Form MultiSelect Grouped Component.。
多选组件允许用户从提供的选项中选择多个选项。多选选项的分组允许我们将类似的选项分组，这有助于用户快速找到相关的选项，并改善用户体验。对于分组，group属性必须被设置为true。
Angular PrimeNG Form MultiSelect分组模式属性：
- option。此属性用于传递要作为多选选项显示的对象数组。
- group。这是一个布尔属性，用于指定是否启用或禁用分组模式。
- optionLabel。这是选项的嵌套对象的属性，将被用作选项的标签。
- optionGroupLabel。这是选项对象的属性，将被用作组的标签。
- optionGroupChildren。这是选项对象的属性，包含了组的子女。
- defaultLabel。这个属性接受一个字符串，当没有选择任何项目时，它被用作占位符。
语法:
<p-multiSelect
[group]="true"
[options]="..."
[(ngModel)]="..."
optionLabel="..."
optionGroupLabel="..."
optionGroupChildren="..."
defaultLabel="...">
</p-multiSelect>
创建应用程序并安装所需模块：
第1步：使用以下命令创建Angular应用程序。
ng new my_app
第2步：创建应用程序后，使用以下命令移动到项目文件夹。
cd new_app
第3步：最后，在你的项目目录中安装以下模块
npm install primeng --save
npm install primeicons --save
项目结构：项目结构将显示在以下图片中。
Project Structure
例子1：这是一个简单的例子，显示如何将多选选项分组。
- app.component.html:
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h5>
Angular PrimeNG Form MultiSelect
Grouped Component
</h5>
<p-multiSelect
class="custom-ms"
[group]="true"
[options]="itemGroups"
[(ngModel)]="selectedItems"
defaultLabel="Select Software(s)">
</p-multiSelect>
- app.component.ts:
import { Component } from "@angular/core";
import { SelectItemGroup } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: [
`
:host ::ng-deep .custom-ms
.p-multiselect-label {
width: 300px !important;
}
`
]
})
export class AppComponent {
itemGroups: SelectItemGroup[] = [];
selectedItems: any[] = [];
ngOnInit() {
this.itemGroups = [
{
label: "Browsers",
items: [
{
label: "Chrome",
value: "web_1",
},
{
label: "Firefox",
value: "web_2"
},
{
label: "Edge",
value: "web_3",
},
]
},
{
label: "Creative Tools",
items: [
{
label: "Filmora",
value: "cre_1"
},
{
label: "Illustrator",
value: "cre_2",
},
{
label: "Photoshop",
value: "cre_3"
},
]
},
{
label: "IDEs",
items: [
{
label: "VS Code",
value: "ide_1",
},
{
label: "Atom",
value: "ide_2"
},
{
label: "Turbo C++",
value: "ide_3",
},
]
}
];
}
}
- 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 { MultiSelectModule } from "primeng/multiselect";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MultiSelectModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
例子2：这是另一个例子，说明使用分组属性将选项分组在一起。
- app.component.html
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h5>
Angular PrimeNG Form MultiSelect
Grouped Component
</h5>
<p-multiSelect
class="custom-ms"
[group]="true"
[options]="brandGroups"
[(ngModel)]="selectedBrands"
display="chip"
optionLabel="name"
optionGroupLabel="groupName"
optionGroupChildren="brands"
defaultLabel="Select Software(s)">
</p-multiSelect>
- app.component.ts
import { Component } from "@angular/core";
interface Brand {
name: string;
id: string;
}
interface BrandsGroup {
groupName: string;
brands: Brand[];
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: [
`
:host ::ng-deep .custom-ms
.p-multiselect-label {
width: 300px !important;
}
`
]
})
export class AppComponent {
brandGroups: BrandsGroup[] = [];
selectedBrands: Brand[] = [];
ngOnInit() {
this.brandGroups = [
{
groupName: "Sports",
brands: [
{
name: "Adidas",
id: "sports_1"
},
{
name: "Puma",
id: "sports_2"
},
{
name: "Nike",
id: "sports_3"
},
{
name: "HRX",
id: "sports_4"
},
]
},
{
groupName: "Transport",
brands: [
{
name: "Delhivery",
id: "trans_1"
},
{
name: "DHL",
id: "trans_2"
},
{
name: "FedEx",
id: "trans_3"
}
]
},
{
groupName: "Clothing",
brands: [
{
name: "Peter England",
id: "clothing_1"
},
{
name: "Allen Solly",
id: "clothing_2"
}
]
}
];
}
}
- 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 { MultiSelectModule } from "primeng/multiselect";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MultiSelectModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
