极客教程Angular PrimeNG Form 多选择模板模式组件
Angular PrimeNG是一个免费的开源框架，拥有各种组件，Angular开发者可以在他们的应用程序中使用这些组件来增强用户体验，并加快开发速度，因为他们不必从头开始编写一切。在这篇文章中，我们将讨论Angular PrimeNG表单多选模板模式组件。
多选组件允许用户从提供的选项集中选择多个选项。多选组件的占位符的模板可以作为selectedItemsLabel属性的值提供。所选项目的数量可以通过selectedItemsLabel属性的值中的{0}来访问。
Angular PrimeNG表格多选模板模式属性：
- option。我们可以向这个属性传递一个对象数组来显示多选选项。
- selectedItemsLabel。它用于定制多选组件的标签。
- maxSelectedLabels:它用于定义在显示传递给selectedItemsLabel属性的模板之前可以选择的最大项目数量。
- defaultLabel。它是在没有选择项目时显示的标签。
- optionLabel。它是多选组件的一个选项的标签字段的名称。
语法:
<p-multiSelect
[options]="..."
[(ngModel)]="..."
defaultLabel="..."
selectedItemsLabel="Total Selected: {0}"
[maxSelectedLabels]="..."
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：这个例子展示了selectedItemsLabel属性的基本模板化的使用。
- app.component.html:
<h2>GeeksforGeeks</h2>
<h5>
Angular PrimeNG Form
MultiSelect Template Mode Component
</h5>
<p-multiSelect
[options]="courses"
[(ngModel)]="selected"
defaultLabel="Select Course(s)"
selectedItemsLabel="{0} Options Selected"
[maxSelectedLabels]="1"
optionLabel="name">
</p-multiSelect>
- app.component.ts:
import { Component } from "@angular/core";
interface Course {
id: number;
name: string;
price: string;
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
export class AppComponent {
courses: Course[] = [];
selected: Course[] = [];
ngOnInit() {
this.courses = [
{
id: 1,
name: "Self Paced DSA",
price: "3,899"
},
{
id: 2,
name: "CIP - Self Paced",
price: "6,999"
},
{
id: 3,
name: "System Design - Live",
price: "10,999"
},
{
id: 4,
name: "CP - Live",
price: "10,999"
},
{
id: 5,
name: "C++ Self Paced",
price: "1,699"
},
{
id: 6,
name: "GATE 2024",
price: "11,999"
}
];
}
}
- 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： selectedItemsLabel属性也可以被设置为 “省略号”。这将会用省略号（三个点）来取代溢出的内容。这也是Multiselect的默认行为。
- app.component.html:
<h2>GeeksforGeeks</h2>
<h5>
Angular PrimeNG Form
MultiSelect Template Mode Component
</h5>
<p-multiSelect
class="mySelect"
[options]="courses"
[(ngModel)]="selected"
defaultLabel="Select Course(s)"
selectedItemsLabel="ellipsis"
optionLabel="name">
</p-multiSelect>
- app.component.ts:
import { Component } from "@angular/core";
interface Course {
id: number;
name: string;
price: string;
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: [
`:host ::ng-deep .mySelect
.p-multiselect-label{
width: 300px;
}
`
]
})
export class AppComponent {
courses: Course[] = [];
selected: Course[] = [];
ngOnInit() {
this.courses = [
{
id: 1,
name: "Self Paced DSA",
price: "3,899"
},
{
id: 2,
name: "CIP - Self Paced",
price: "6,999"
},
{
id: 3,
name: "System Design - Live",
price: "10,999"
},
{
id: 4,
name: "CP - Live",
price: "10,999"
},
{
id: 5,
name: "C++ Self Paced",
price: "1,699"
},
{
id: 6,
name: "GATE 2024",
price: "11,999"
}
];
}
}
- 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 { }
输出:
