Angular PrimeNG Form CascadeSelect组件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，该框架可用于制作响应式网站，非常方便。本文将向我们展示如何使用Angular PrimeNG Form CascadeSelect组件。

CascadeSelect组件用于显示选项的嵌套结构。它就像一个Dropdown组件，其中的项目有其嵌套的项目，用户可以选择。

语法:

<p-cascadeSelect
    [options]="..."
    optionLabel="..."
    optionGroupLabel="..."
    [optionGroupChildren]="..."
    ...
    [(ngModel)]="...">
</p-cascadeSelect>

Angular PrimeNG Form CascadeSelect组件属性：。

option。此属性用于定义一个选择项数组，以显示为可用的选项。
optionLabel。此属性用于标注选项。
optionValue。此属性用于定义选项的值。
optionGroupLabel:此属性用于标记选项组。
optionGroupChildren。该属性用于检索组的项目。
placeholder。这个属性在没有选择选项时使用。
disabled:此属性用于禁用该组件。
dataKey。此属性用于唯一地识别一个选项。
tabindex。该属性用于定义元素在标签顺序中的索引。
inputId。此属性用于定义输入的唯一身份。
ariaLabelledBy。该属性用于建立组件和标签之间的关系，其值应该是一个或多个元素ID。
appendTo。这个属性定义了元素的Id或文档的 “主体”，覆盖物应该被附加到这个元素上。
style。该属性用于定义组件的内联风格。
panelStyle。该属性用于定义叠加面板的内联风格。
styleClass。该属性用于样式组件的类别。
panelStyleClass。该属性用于样式化覆盖面板的类别。
inputLabel。此属性用于标记输入，以便于访问。
ariaLabel。此属性用于定义标记输入的字符串，以实现无障碍性。
ariaLabelledBy。该属性用于指定DOM中为输入字段贴标签的一个或多个ID。
showClear: 此属性用于显示清除图标以清除数值。

Angular PrimeNG Form CascadeSelect组件事件：。

onChange:该事件用于调用值的变化。
onGroupChange:该事件用于在一个组发生变化时调用。
onBeforeShow。该事件用于在覆盖层显示之前调用。
onBeforeHide。该事件用于在覆盖物被隐藏之前调用。
onShow。该事件用于在覆盖层显示时调用。
onHide。该事件用于在覆盖层被隐藏时调用。
onClear：该事件用于在输入字段被清除时调用。

Angular PrimeNG Form CascadeSelect组件模板：。

value。该模板用于定义值。
option。该模板用于定义选项。

Angular PrimeNG Form CascadeSelect Component Styling：

p-cascadeselect。这个造型是用来定义容器元素的。
p-cascadeselect-label。该造型用于显示所选选项的标签。
p-cascadeselect-trigger。该造型用于定义Icon元素。
p-cascadeselect-panel。这个造型是用来定义Icon元素的。
p-cascadeselect-items-wrapper。该样式用于定义项目列表的包装器元素。
p-cascadeselect-items。该造型用于定义项目的列表元素。
p-cascadeselect-item。该造型用于定义列表中的一个项目。

创建Angular应用程序和模块安装。

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

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：在你给定的目录中安装PrimeNG。

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

Project Structure:

Angular PrimeNG Form CascadeSelect组件

Project Structure

示例1：在下面的代码中，我们将利用上述语法来演示Form CascadeSelect组件的使用。

app.component.html:

<!DOCTYPE html>
  
<head>
    <title>GFG</title>
    <style>
        body {
            background-color: lightgrey;
            width: 100%;
            height: 540px;
        }
    </style>
</head>
<html>
  
<body>
    <div style="text-align:center;">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>A computer science portal for geeks</h3>
        <h4>
            Angular PrimeNG Form 
            CascadeSelect Component
        </h4>
        <h5>Basic</h5>
  
        <p-cascadeSelect 
            [(ngModel)]="selectedCity1" 
            [options]="countries" 
            optionLabel="cname" 
            optionGroupLabel="name"
            [optionGroupChildren]="['states', 'cities']" 
            [style]="{ minWidth: '14rem' }" 
            placeholder="Select a City">
        </p-cascadeSelect>
    </div>
</body>
  
</html>

app.component.ts:

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
export class AppComponent {
    countries: any[] = [];
  
    selectedCity1: any;
  
    selectedCity2: any;
  
    ngOnInit() {
        this.countries = [
            {
                name: "India",
                code: "AU",
                states: [
                    {
                        name: "Mumbai",
                        cities: [
                            { 
                                cname: "Nallasopara", 
                                code: "NSP" 
                            },
                            { 
                                cname: "Mira Road", 
                                code: "MR" 
                            },
                            { 
                                cname: "Dahisar", 
                                code: "DHI" 
                            }
                        ]
                    },
                    {
                        name: "UP",
                        cities: [
                            { 
                                cname: "Varansi", 
                                code: "VR" 
                            },
                            { 
                                cname: "Balia", 
                                code: "BA" 
                            }
                        ]
                    }
                ]
            },
        ];
    }
}

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 { CascadeSelectModule }
    from "primeng/cascadeselect";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        CascadeSelectModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

Angular PrimeNG Form CascadeSelect组件

示例2：在下面的代码中，我们将利用上述语法来演示Form CascadeSelect组件的使用。

app.component.html:

<!DOCTYPE html>
  
<head>
    <title>GFG</title>
    <style>
        body {
            background-color: lightgrey;
            width: 100%;
            height: 540px;
        }
    </style>
</head>
<html>
  
<body>
    <div style="text-align:center;">
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
        <h4>
            Angular PrimeNG Form 
            CascadeSelect Component
        </h4>
        <h5>Templating</h5>
  
        <p-cascadeSelect 
            [(ngModel)]="selectedCity2" 
            [options]="countries" 
            optionLabel="cname" 
            optionGroupLabel="name"
            [optionGroupChildren]="['states', 'cities']" 
            [style]="{ minWidth: '14rem' }" 
            placeholder="Select a City">
  
            <ng-template pTemplate="option" let-option>
                <div class="country-item">
                    <i 
                        class="pi pi-compass p-mr-2" 
                        *ngIf="option.cities"> 
                    </i>
                    <i 
                        class="pi pi-map-marker p-mr-2" 
                        *ngIf="option.cname"> 
                    </i>
                    <span>
                        {{ option.cname || option.name }}
                    </span>
                </div>
            </ng-template>
        </p-cascadeSelect>
    </div>
</body>
  
</html>

app.component.ts:

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
export class AppComponent {
    countries: any[] = [];
  
    selectedCity1: any;
  
    selectedCity2: any;
  
    ngOnInit() {
        this.countries = [
            {
                name: "India",
                code: "AU",
                states: [
                    {
                        name: "Mumbai",
                        cities: [
                            { 
                                cname: "Nallasopara", 
                                code: "NSP" 
                            },
                            { 
                                cname: "Mira Road", 
                                code: "MR" 
                            },
                            { 
                                cname: "Dahisar", 
                                code: "DHI" 
                            }
                        ]
                    },
                    {
                        name: "UP",
                        cities: [
                            { 
                                cname: "Varansi", 
                                code: "VR" 
                            },
                            { 
                                cname: "Balia", 
                                code: "BA" 
                            }
                        ]
                    }
                ]
            },
        ];
    }
}

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 { CascadeSelectModule }
    from "primeng/cascadeselect";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        CascadeSelectModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }