Angular PrimeNG Form CascadeSelect基本组件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架用于制作响应式网站，非常容易。本文将告诉我们如何在Angular PrimeNG中使用TreeTable Column Resize。

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

Angular PrimeNG Form CascadeSelect基本属性：

option。此属性用于定义一个选择项数组，以显示为可用的选项。
optionLabel。该属性用于标注选项。
optionGroupLabel:此属性用于标记选项组。
optionGroupChildren。该属性用于检索组的项目。

语法:

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

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

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

ng new appname

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

cd appname

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

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

项目结构：完成上述步骤后，项目结构将如下所示。

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 one 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:

<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)]="course1" 
        [options]="course" 
        optionLabel="chapter" 
        optionGroupLabel="name"
        [optionGroupChildren]="['sub', 'chapter']" 
        [style]="{ minWidth: '14rem' }" 
        placeholder="Select a chapter">
    </p-cascadeSelect>
</div>

app.component.ts:

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    course: any[] = [];
  
    course1: any;
  
    ngOnInit() {
        this.course = [
            {
                name: 'Opertating System',
                code: 'OS',
                sub: [
                    {
                        name: 'Types of Operating System',
                        chapter: [
                            { chapter: 'Batch Operating System ' },
                            { chapter: ' Time-Sharing Operating Systems' },
                            { chapter: 'Distributed Operating System' },
                        ],
                    },
                ],
            },
        ];
    }
}

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基本组件