Angular PrimeNG Form MultiSelect Chips显示组件

Angular PrimeNG是一个免费的开源框架，包含各种组件，Angular开发者可以在他们的应用程序中使用这些组件来增强用户体验，并加快开发速度，因为他们不必从头开始编写所有内容。在这篇文章中，我们将讨论Angular PrimeNG表格多选芯片显示组件。

多选组件允许用户从提供的选项中选择多个选项。当多选组件处于筹码显示模式时，所选的选项会显示为带有移除图标的筹码，否则默认情况下，所选的选项会显示为用逗号分隔的纯文本。要启用芯片显示模式，可以将显示属性设置为 “芯片”。

Angular PrimeNG Form MultiSelect Chips显示组件：

option。它用于传递一个对象数组，作为多选选项显示。
show。当此属性被设置为 “筹码 “时，所选项目将被显示为筹码。
defaultLabel。它用于指定一个字符串，当没有选择任何项目时将会显示。
optionLabel。它用于指定将被用作选项标签的对象的属性名称。
optionDisabled。它用于指定对象的属性名称，该属性将用于决定该选项是否被禁用。

语法:

<p-multiSelect 
    [options]="..." 
    display="chip" 
    [(ngModel)]="..." 
    defaultLabel="..." 
    optionLabel="...">
</p-multiSelect>

创建应用程序并安装所需模块：

第1步：使用以下命令创建Angular应用程序。

ng new my_app

第2步：创建应用程序后，使用下面写的命令移动到项目文件夹。

cd new_app

第3步：最后，在你的项目目录中安装以下模块

npm install primeng --save
npm install primeicons --save

项目结构：现在，项目结构将如下图所示。

Angular PrimeNG Form多选芯片显示组件

Project Structure

例子1：在这个例子中，我们将多选组件的显示属性设置为 “筹码”，因此所选项目将显示为筹码，而溢出的项目将被省略号取代。

app.component.html

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h5>
    Angular PrimeNG Form MultiSelect
    Chips Display Component
</h5>
  
<p-multiSelect 
    class="custom-ms" 
    [options]="courses" 
    display="chip" 
    [(ngModel)]="selected"
    defaultLabel="Select Course(s)" 
    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 .custom-ms 
            .p-multiselect-label {
            width: 450px !important;
        }
        `
    ]
})
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 { }

输出:

Angular PrimeNG Form多选芯片显示组件

例子2：在这个例子中，我们使用Multiselect的optionDisabled属性为disabled选项指定一个标签，当设置为false时，该标签将禁用多选选项。

app.component.html

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h5>
    Angular PrimeNG Form MultiSelect
    Chips Display Component
</h5>
  
<p-multiSelect 
    class="custom-ms" 
    [options]="courses" 
    display="chip" 
    [(ngModel)]="selected" 
    optionDisabled="isActive"
    defaultLabel="Select Course(s)" 
    optionLabel="name">
</p-multiSelect>

app.component.ts

import { Component } from "@angular/core";
  
interface Course {
    id: number;
    name: string;
    price: string;
    isActive: boolean;
}
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        :host ::ng-deep .custom-ms 
            .p-multiselect-label {
            width: 400px !important;
        }
        `
    ]
})
export class AppComponent {
  
    courses: Course[] = [];
    selected: Course[] = [];
  
    ngOnInit() {
        this.courses = [
            {
                id: 1,
                name: "Self Paced DSA",
                price: "3,899",
                isActive: false
            },
            {
                id: 2,
                name: "CIP - Self Paced",
                price: "6,999",
                isActive: true
            },
            {
                id: 3,
                name: "System Design - Live",
                price: "10,999",
                isActive: true
            },
            {
                id: 4,
                name: "CP - Live",
                price: "10,999",
                isActive: false
            },
            {
                id: 5,
                name: "C++ Self Paced",
                price: "1,699",
                isActive: false
            },
            {
                id: 6,
                name: "GATE 2024",
                price: "11,999",
                isActive: 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 { }

输出:

Angular PrimeNG Form多选芯片显示组件