极客教程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:
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 { }
输出:
示例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 { }
输出:
