极客教程Angular PrimeNG Form TreeSelect Single Component
Angular PrimeNG是一个开源的库，由原生的Angular UI组件组成，用于实现出色的造型，这个框架用于制作响应式网站，非常容易。在这篇文章中，我们将看到Angular PrimeNG Form TreeSelect Single Component.
TreeSelect组件允许用户从分层的数据中选择项目。它接受一个TreeNodes数组作为其选项属性来显示数据。在TreeSelect单一选择模式下，可以从层次结构中选择一个项目。
Angular PrimeNG Form Tree选择单一属性：
- options。该属性接受一个TreeNodes数组作为其值来显示TreeSelect组件。
- selectionMode。该属性用于设置TreeSelect组件的选择模式。可接受的值是 “单一”、”多个 “和 “复选框”。默认值是 “单一”。
- display。此属性定义了所选项目的显示方式。接受的值是 “逗号 “和 “芯片”。默认值是 “chip”。
- placeholder。占位符属性用于设置没有选择项目时要显示的占位符。
语法:
<p-treeSelect
[(ngModel)]="..."
selectionMode="single"
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
项目结构：在完成上述步骤后，项目结构将看起来像这样。
Project Structure
例子1：这个例子说明了TreeSelect组件的单一选择模式的使用。这里一次只能选择一个节点，它可以是一个父节点或子节点。
- app.component.html:
<h2 style="color: green">GeeksforGeeks</h2>
<h3>
Angular PrimeNG Form
TreeSelect Single Component
</h3>
<p-treeSelect
[(ngModel)]="selected"
selectionMode="single"
[options]="nodes"
placeholder="Select a Node">
</p-treeSelect>
- app.component.ts:
import { Component } from "@angular/core";
import { TreeNode } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
export class AppComponent {
nodes: TreeNode[] = [];
selected: any;
ngOnInit()
{
this.nodes = [
{
"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 { FormsModule } from '@angular/forms';
import { TreeSelectModule } from 'primeng/treeselect';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TreeSelectModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
例子2：在这个例子中，我们将TreeSelect组件的过滤属性设置为 “true”，因此它在项目的顶部显示了一个搜索条，以便对其进行过滤。
- app.component.html:
<h2 style="color: green">GeeksforGeeks</h2>
<h3>
Angular PrimeNG Form
TreeSelect Single Component
</h3>
<p-treeSelect
[(ngModel)]="selected"
[filter]="true"
[options]="nodes"
placeholder="Select a Node">
</p-treeSelect>
- app.component.ts:
import { Component } from "@angular/core";
import { TreeNode } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
export class AppComponent {
nodes: TreeNode[] = [];
selected: any;
ngOnInit()
{
this.nodes = [
{
"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 { FormsModule } from '@angular/forms';
import { TreeSelectModule } from 'primeng/treeselect';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TreeSelectModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
