极客教程Angular PrimeNG表格多选所选项目标签组件
Angular PrimeNG是一个由数百个UI组件组成的集合，可供开发人员使用，以加快他们的应用程序的开发过程。它是由PrimeTek Informatics开发的，也被称为PrimeFaces。在这篇文章中，我们将看到Angular PrimeNG Form MultiSelect Selected Items Label Component.。
多选组件允许用户从提供的选项集中选择多个选项。默认情况下，当selectedItemsLabel属性未被指定，且所选项目达到最大数量时，会使用省略号来显示文本溢出。这可以通过使用selectedItemsLabel属性指定一个模板字符串来改变，在模板中可以使用{0}访问所选项目的数量。
Angular PrimeNG Form MultiSelect Selected Items Label属性：
- option。它接受一个对象数组，作为多选选项显示。
- selectedItemsLabel:此属性用于指定一个模板来显示标签。可以用{0}来访问所选项目的数量。这个属性的默认值是 “省略号”，显示一个省略号来表示文本的溢出。
- maxSelectedLabel。它指定了在selectedItemsLabel模板显示之前可以选择的最大项目数量。
- defaultLabel。它用于指定多选组件的占位符文本。
- optionLabel。用于指定对象的属性，作为多选选项的标签显示。
语法:
<p-multiSelect
[options]="..."
[(ngModel)]="..."
selectedItemsLabel="No. of Selected Items: {0}"
[maxSelectedLabels]="3"
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：在这个例子中，我们将selectedItemsLabel属性设置为 “ellipsis”，即默认值，这将显示省略号来显示文本溢出。
- app.component.html
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h5>
Angular PrimeNG Form MultiSelect
Selected Items Label Component
</h5>
<p-multiSelect
class="custom-ms"
[options]="cars"
[(ngModel)]="selected"
selectedItemsLabel="ellipsis"
defaultLabel="Select Car(s)"
optionLabel="name">
</p-multiSelect>
- app.component.ts
import { Component } from "@angular/core";
interface Car{
id: number;
name: string;
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: [
`
:host ::ng-deep .custom-ms
.p-multiselect-label {
width: 400px !important;
}
`
]
})
export class AppComponent {
cars: Car[] = [];
selected: Car[] = [];
ngOnInit()
{
this.cars = [
{
id: 1,
name: "Vitara Brezza"
},
{
id: 2,
name: "Audi R8"
},
{
id: 3,
name: "Swift Dezire"
},
{
id: 4,
name: "Baleno"
},
{
id: 5,
name: "Ertiga"
},
{
id: 6,
name: "Seltos"
},
];
}
}
- 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：在这个例子中，我们指定了一个模板 “No:{因此，只要有超过3个项目被选中，该模板就会被用来显示自定义信息。
- app.component.html
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h5>
Angular PrimeNG Form MultiSelect
Selected Items Label Component
</h5>
<p-multiSelect
class="custom-ms"
[options]="cars"
[(ngModel)]="selected"
selectedItemsLabel="No. of Selected Items: {0}"
[maxSelectedLabels]="3"
defaultLabel="Select Car(s)"
optionLabel="name">
</p-multiSelect>
- app.component.ts
import { Component } from "@angular/core";
interface Car{
id: number;
name: string;
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: [
`
:host ::ng-deep .custom-ms
.p-multiselect-label {
width: 400px !important;
}
`
]
})
export class AppComponent {
cars: Car[] = [];
selected: Car[] = [];
ngOnInit()
{
this.cars = [
{
id: 1,
name: "Vitara Brezza"
},
{
id: 2,
name: "Audi R8"
},
{
id: 3,
name: "Swift Dezire"
},
{
id: 4,
name: "Baleno"
},
{
id: 5,
name: "Ertiga"
},
{
id: 6,
name: "Seltos"
},
];
}
}
- 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 { }
输出:
