极客教程Angular PrimeNG Form MultiSelect Elipsis Mode组件
Angular PrimeNG是一个由数百个UI组件组成的集合，可供开发人员使用，以加快他们的应用程序的开发过程。它是由PrimeTek Informatics开发的，也被称为PrimeFaces。在这篇文章中，我们将讨论Angular PrimeNG Form MultiSelect Elipsis Mode组件。
多选组件允许用户从提供的选项集中选择多个选项。在多选组件中，Elipsis模式是默认启用的。在Elipsis模式中，溢出的所选选项被elipsis（三个点）取代。椭圆模式可以通过设置selectedItemsLabel属性为 “ellipsis “明确启用。
Angular PrimeNG Form MultiSelect Elipsis Mode属性：
- option。多重选择的这个属性接受一个对象数组，作为多重选择选项显示。
- selectedItemsLabel。这个属性用于提供一个模板来指示所选选项的溢出。默认情况下，它被设置为 “省略号”，在这里它显示省略号来表示内容溢出。
- optionLabel。它是选项对象的属性，将被用作选项标签。
- defaultLabel。这是一个占位符，当没有项目被选中时，它将被显示。
- show。此属性用于将其值设置为 “chip”，以将选定的项目显示为chip。
语法:
<p-multiSelect
[options]="..."
selectedItemsLabel="ellipsis"
[(ngModel)]="..."
optionLabel="..."
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：这个例子说明了多选组件的弹性模式。在这里，溢出的选择项将用elipsis表示。
- app.component.html
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h5>
Angular PrimeNG Form MultiSelect
Elipsis Mode Component
</h5>
<p-multiSelect
class="custom-ms"
[options]="items"
[(ngModel)]="selectedItems"
optionLabel="name"
defaultLabel="Select Item(s)">
</p-multiSelect>
- app.component.ts
import { Component } from "@angular/core";
interface Item{
id: number;
name: string;
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: [
`
:host ::ng-deep .custom-ms
.p-multiselect-label {
width: 200px !important;
}
`
]
})
export class AppComponent {
items: Item[] = [];
selectedItems: Item[] = [];
ngOnInit()
{
this.items = [
{
name: "Wood",
id: 1
},
{
id: 2,
name: "Pen"
},
{
id: 3,
name: "Smartphone"
},
{
id: 4,
name: "Tablet"
},
{
id: 5,
name: "Pencil"
},
{
id: 6,
name: "Books"
},
];
}
}
- 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
Elipsis Mode Component
</h5>
<p-multiSelect
class="custom-ms"
[options]="items"
display="chip"
selectedItemsLabel="ellipsis"
[(ngModel)]="selectedItems"
optionLabel="name"
defaultLabel="Select Item(s)">
</p-multiSelect>
- app.component.ts
import { Component } from "@angular/core";
interface Item{
id: number;
name: string;
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: [
`
:host ::ng-deep .custom-ms
.p-multiselect-label {
width: 250px !important;
}
`
]
})
export class AppComponent {
items: Item[] = [];
selectedItems: Item[] = [];
ngOnInit()
{
this.items = [
{
name: "Wood",
id: 1
},
{
id: 2,
name: "Pen"
},
{
id: 3,
name: "Smartphone"
},
{
id: 4,
name: "Tablet"
},
{
id: 5,
name: "Pencil"
},
{
id: 6,
name: "Books"
},
];
}
}
- 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 { }
输出:
