极客教程Angular PrimeNG表格多选禁用选项组件
Angular PrimeNG是一个由数百个UI组件组成的集合，开发人员可以使用它来加快他们的应用程序的开发过程。它是由PrimeTek Informatics开发的，也被称为PrimeFaces。在这篇文章中，我们将看到Angular PrimeNG Form MultiSelect Disabled Options Component.。
多选组件允许用户从提供的选项集中选择多个选项。多选组件的单个选项可以通过传递选项对象的布尔属性作为optionDisabled属性的值来显示。
Angular PrimeNG Form MultiSelect Disabled选项属性：
- option。此属性用于指定一个对象数组，这些对象将被显示为多选选项。
- defaultLabel。该属性用于为多选指定一个占位符字符串。
- optionLabel。此属性用于指定将被用作选项标签的对象属性的名称。
- optionDisabled。此属性用于指定对象属性的名称，该对象属性将决定该选项是启用还是禁用。
语法:
<p-multiSelect
[options]="..."
[(ngModel)]="..."
optionDisabled="..."
defaultLabel="..."
optionLabel="...">
</p-multiSelect>
创建应用程序并安装所需模块：
第1步：使用以下命令创建Angular应用程序。
ng new my_app
第2步：创建应用程序后，使用下面写的命令移动到项目文件夹。
cd new_app
第3步：最后，在你的项目目录中安装以下模块。
npm install primeng --save
npm install primeicons --save
项目结构：现在，项目结构将如下图所示。
Project Structure
例子1：在这个例子中，我们禁用了多选组件的Fan, Table,和Watch选项，所以它们不能被选中。
- app.component.html
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h5>
Angular PrimeNG Form MultiSelect
Disabled Options Component
</h5>
<p-multiSelect
class="custom-ms"
[options]="items"
[(ngModel)]="selectedItems"
optionDisabled="isDisabled"
defaultLabel="Select Car(s)"
optionLabel="name">
</p-multiSelect>
- app.component.ts
import { Component } from "@angular/core";
interface Item{
id: number;
name: string;
price: number;
isDisabled?: boolean;
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: [
`
:host ::ng-deep .custom-ms
.p-multiselect-label {
width: 300px !important;
}
`
]
})
export class AppComponent {
items: Item[] = [];
selectedItems: Item[] = [];
ngOnInit()
{
this.items = [
{
id: 1,
name: "Fan",
price: 4999,
isDisabled: true
},
{
id: 2,
name: "Tubelight",
price: 999
},
{
id: 3,
name: "Table",
price: 1299,
isDisabled: true
},
{
id: 4,
name: "Laptop Bag",
price: 2999
},
{
id: 5,
name: "Watch",
price: 8999,
isDisabled: true
},
{
id: 6,
name: "Smartphone",
price: 24999
},
];
}
}
- 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：在这个例子中，我们把项目分成3组，并禁用了其中一些。被禁用的选项将是灰色的，不能被选择。
- app.component.html
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h5>
Angular PrimeNG Form MultiSelect
Disabled Options Component
</h5>
<p-multiSelect
class="custom-ms"
[group]="true"
[options]="itemGroups"
[(ngModel)]="selectedItems"
defaultLabel="Select Car(s)">
<ng-template let-x>
<div class="flex align-items-center">
<span>{{x.label}}</span>
</div>
</ng-template>
</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: "Tools",
items: [
{
label: "Hammer",
value: "tool_1",
disabled: true
},
{
label: "Saw",
value: "tool_2"
},
{
label: "Screw",
value: "tool_3",
disabled: true
},
]
},
{
label: "Fruits",
items: [
{
label: "Mango",
value: "fruit_1"
},
{
label: "Apple",
value: "fruit_2",
disabled: true
},
{
label: "Banana",
value: "fruit_3"
},
]
},
{
label: "Vegetables",
items: [
{
label: "Tomato",
value: "veg_1",
disabled: true
},
{
label: "Potato",
value: "veg_2"
},
{
label: "Cucumber",
value: "veg_3",
disabled: true
},
]
}
];
}
}
- 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 { }
输出:
