极客教程Angular PrimeNG Form TreeSelect选择模式组件
Angular PrimeNG是一个开源的库，由原生的Angular UI组件组成，这些组件被用来做伟大的造型，这个框架被用来制作响应式网站，非常容易。在这篇文章中，我们将看到表格TreeSelect选择模式的组件。
TreeSelect组件允许用户从分层的数据中选择项目。它接受一个TreeNodes数组作为其选项属性来显示数据。在TreeSelect单一选择模式下，可以从层次结构中选择一个项目。在TreeSelect multiple选择模式下，可以从层次结构中选择多个项目。
Angular PrimeNG Form TreeSelect选择模式属性：
- options。该属性接受一个TreeNodes数组作为其值来显示TreeSelect组件。
- selectionMode。该属性用于设置TreeSelect组件的选择模式。可接受的值是 “单一”、”多个 “和 “复选框”。默认值是 “单一”。
- display。此属性定义了所选项目的显示方式。接受的值是 “逗号 “和 “芯片”。默认值是 “chip”。
- placeholder。占位符属性用于设置没有选择项目时要显示的占位符。
语法:
<p-treeSelect
[(ngModel)]="..."
selectionMode="..."
disaply="..."
[options]="..."
placeholder="...>
</p-treeSelect>
创建Angular应用程序并安装模块：
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步：最后，在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：在完成上述步骤后，项目结构将看起来像这样。
示例1：在下面的代码中，我们将使用上述语法来演示表格树选择模式组件使用单一选择模式。
- 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 TreeSelect
Selection Mode Component
</h4>
<p-treeSelect
[(ngModel)]="selectedNode"
[options]="gfg"
selectionMode="single"
placeholder="Select any item geek...">
</p-treeSelect>
</div>
- app.component.ts
import { Component } from "@angular/core";
import { TreeNode } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
export class AppComponent {
gfg: TreeNode[] = [];
ngOnInit()
{
this.gfg = [
{
"label": "Work",
"icon": "pi pi-folder",
"children": [
{
"label": "data.json",
"icon": "pi pi-file"
},
{
"label": "sales.docx",
"icon": "pi pi-file"
},
{
"label": "presentation.pptx",
"icon": "pi pi-file"
}
]
},
{
"label": "Home",
"icon": "pi pi-folder",
"children": [
{
"label": "grocery.word",
"icon": "pi pi-file"
},
{
"label": "picture.jpeg",
"icon": "pi pi-file"
},
{
"label": "homeplan.png",
"icon": "pi pi-file"
}
]
},
{
"label": "Multimedia",
"icon": "pi pi-folder",
"children": [
{
"label": "infinity-war.mp4",
"icon": "pi pi-file"
},
{
"label": "you.mp3",
"icon": "pi pi-file"
},
{
"label": "endgame.mp4",
"icon": "pi pi-file"
},
{
"label": "MI.mp4",
"icon": "pi pi-file"
}
]
}
];
}
}
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TreeSelectModule } from 'primeng/treeselect';
import {ButtonModule} from 'primeng/button';
import {PanelModule} from 'primeng/panel';
import {FormsModule} from '@angular/forms';
import { NodeService } from './nodeservice';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ButtonModule,
PanelModule,
FormsModule,
HttpClientModule,
TreeSelectModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [ NodeService ]
})
export class AppModule { }
输出:
示例2：下面是另一个代码示例，演示了使用多种选择模式的表格树选择模式组件的使用。
- 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 TreeSelect
Selection Mode Component
</h4>
<p-treeSelect
[options]="gfg"
selectionMode="multiple"
[metaKeySelection]="false"
placeholder="Select any item geek...">
</p-treeSelect>
</div>
- app.component.ts
import { Component } from "@angular/core";
import { TreeNode } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
export class AppComponent {
gfg: TreeNode[] = [];
ngOnInit()
{
this.gfg = [
{
"label": "Work",
"icon": "pi pi-folder",
"children": [
{
"label": "data.json",
"icon": "pi pi-file"
},
{
"label": "sales.docx",
"icon": "pi pi-file"
},
{
"label": "presentation.pptx",
"icon": "pi pi-file"
}
]
},
{
"label": "Home",
"icon": "pi pi-folder",
"children": [
{
"label": "grocery.word",
"icon": "pi pi-file"
},
{
"label": "picture.jpeg",
"icon": "pi pi-file"
},
{
"label": "homeplan.png",
"icon": "pi pi-file"
}
]
},
{
"label": "Multimedia",
"icon": "pi pi-folder",
"children": [
{
"label": "infinity-war.mp4",
"icon": "pi pi-file"
},
{
"label": "you.mp3",
"icon": "pi pi-file"
},
{
"label": "endgame.mp4",
"icon": "pi pi-file"
},
{
"label": "MI.mp4",
"icon": "pi pi-file"
}
]
}
];
}
}
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TreeSelectModule } from 'primeng/treeselect';
import {ButtonModule} from 'primeng/button';
import {PanelModule} from 'primeng/panel';
import {FormsModule} from '@angular/forms';
import { NodeService } from './nodeservice';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ButtonModule,
PanelModule,
FormsModule,
HttpClientModule,
TreeSelectModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [ NodeService ]
})
export class AppModule { }
输出:
