极客教程Angular PrimeNG表格多选值绑定组件
PrimeNG是一个由PrimeFaces开发的AngularJS组件库。它为开发者提供了从一系列已经实现的主题和UI组件中为他们的应用程序进行选择。在这篇文章中，我们将讨论Angular PrimeNG Form MultiSelect Value Binding Component。
多选组件允许用户从提供的选项集中选择多个选项。在MultiSelect中，一个选项的值被限定在模型本身，但我们可以使用Multiselect的optionValue属性来传递选项的自定义值。
Angular PrimeNG Form MultiSelect Value Binding Mode属性：
- option。此属性接受一个对象数组，以显示为多选选项。
- optionLabel。该属性指定了选项对象的一个属性，用于显示选项的标签。
- optionValue。这个属性指定了选项对象的一个属性，以获得选项的值。
- defaultLabel。该属性用于指定多选组件的占位符字符串。
- optionGroupLabel。这个属性指定了选项对象的一个属性，当多选处于分组模式时，可以获得组的标签。
- optionGroupChildren。这个属性指定了选项对象的一个属性，当多选处于分组模式时，可以获得组的子项。
语法:
<p-multiSelect
[options]="..."
[(ngModel)]="..."
optionLabel="..."
optionValue="..."
defaultLabel="...">
</p-multiSelect>
创建应用程序并安装所需模块：
第1步：使用以下命令创建Angular应用程序。
ng new my_app
第2步：创建应用程序后，使用以下命令移动到项目文件夹。
cd new_app
第3步：最后，在你的项目目录中安装以下模块
npm install primeng --save
npm install primeicons --save
项目结构：项目结构将显示在以下图片中。
例子1：这是一个简单的例子，说明在Multiselect中使用optionValue属性的价值绑定。在这里，我们将optionValue设置为 “id”，所以它将使用选项的id属性作为值。我们将 “Puma “和 “HRX “选项的id设置为一个字符串，所以每当一个选项被选中/取消时，另一个也会被选中。这只是为了显示值被正确绑定。
- app.component.html
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h5>
Angular PrimeNG Form MultiSelect
Value Binding Component
</h5>
<p-multiSelect
class="custom-ms"
[options]="brands"
[(ngModel)]="selectedBrands"
optionLabel="name"
optionValue="id"
defaultLabel="Select Brand(s)">
</p-multiSelect>
- app.component.ts
import { Component } from "@angular/core";
interface Brand {
name: string;
id: string;
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: [
`
:host ::ng-deep .custom-ms
.p-multiselect-label {
width: 300px !important;
}
`
]
})
export class AppComponent {
brands: Brand[] = [];
selectedBrands: Brand[] = [];
ngOnInit() {
this.brands = [
{
name: "Adidas",
id: "sports_1"
},
{
name: "Puma",
id: "sports_2"
},
{
name: "Nike",
id: "sports_3"
},
{
name: "HRX",
id: "sports_2"
},
{
name: "Delhivery",
id: "trans_1"
},
{
name: "DHL",
id: "trans_2"
},
{
name: "FedEx",
id: "trans_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：在这个例子中，我们使用了选项分组，并将optionValue属性设置为 “id”，因此选项的值将取自id属性。在这里，我们将 “Adidas “和 “Puma “的id设置为一个字符串，所以只要其中一个被选中，其他的复选框也会打开，反之亦然。
- app.component.html
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h5>
Angular PrimeNG Form MultiSelect
Value Binding Component
</h5>
<p-multiSelect
class="custom-ms"
[group]="true"
[options]="brandGroups"
[(ngModel)]="selectedBrands"
optionLabel="name"
optionValue="id"
optionGroupLabel="groupName"
optionGroupChildren="brands"
defaultLabel="Select Brand(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_1"
},
{
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 { }
输出:
