极客教程Angular PrimeNG Form TreeSelect 复选框组件
Angular PrimeNG是PrimeTek开发的一个开源的前端UI框架，用于开发高效和可扩展的angular应用程序。在他们的项目中使用PrimeNG可以帮助开发者减少开发时间，并专注于应用程序的其他重要领域。 在这篇文章中，我们将看到Angular PrimeNG Form TreeSelect Checkbox Component.。
TreeSelect组件允许用户从分层的数据中选择项目。它接受一个TreeNodes数组作为其选项属性来显示数据。在TreeSelect复选框选择模式下，每个项目旁边都会显示一个复选框，它可以用来选择该项目和它下面的所有项目，在层次结构中。
Angular PrimeNG Form TreeSelect Checkbox属性：
- options。该属性接受一个TreeNodes数组作为其值来显示TreeSelect组件。
- selectionMode。该属性用于设置TreeSelect组件的选择模式。可接受的值是 “单一”、”多个 “和 “复选框”。默认值是 “单一”。
- display。此属性定义了所选项目的显示方式。接受的值是 “逗号 “和 “芯片”。默认值是 “chip”。
- placeholder。占位符属性用于设置没有选择项目时要显示的占位符。
语法:
<p-treeSelect
[(ngModel)]="..."
selectionMode="checkbox"
[options]="..."
placeholder="...>
</p-treeSelect>HTML
创建Angular应用程序并安装模块：
第1步：使用以下命令创建一个Angular应用程序。
ng new appnameJavaScript
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appnameJavaScript
第3步：最后，在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --saveJavaScript
项目结构：在完成上述步骤后，项目结构将看起来像这样。
Project Structure
例子1：这是一个基本的例子，说明TreeSelect组件中复选框选择的使用。
- app.component.html:
<h2 style="color: green">GeeksforGeeks</h2>
<h3>
Angular PrimeNG Form
TreeSelect Checkbox Component
</h3>
<p-treeSelect
[(ngModel)]="selected"
selectionMode="checkbox"
display="chip"
[options]="nodes"
placeholder="Select Nodes">
</p-treeSelect>HTML
- app.component.ts:
import { Component } from "@angular/core";
import { TreeNode } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: [
`:host ::ng-deep .p-treeselect{
width: 300px;
}`
]
})
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"
}
]
}
];
}
}JavaScript
- 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 { ChipModule } from 'primeng/chip';
import { TreeSelectModule } from 'primeng/treeselect';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ChipModule,
TreeSelectModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }JavaScript
输出:
例子2：在这个例子中，我们将TreeSelect组件的显示属性设置为 “逗号”，因此所选项目将以逗号分隔。
- app.component.html:
<h2 style="color: green">GeeksforGeeks</h2>
<h3>
Angular PrimeNG Form
TreeSelect Checkbox Component
</h3>
<p-treeSelect
[(ngModel)]="selected"
selectionMode="checkbox"
display="comma"
[options]="nodes"
placeholder="Select Nodes">
</p-treeSelect>HTML
- app.component.ts:
import { Component } from "@angular/core";
import { TreeNode } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: [
`:host ::ng-deep .p-treeselect{
width: 300px;
}`
]
})
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"
}
]
}
];
}
}JavaScript
- 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 { ChipModule } from 'primeng/chip';
import { TreeSelectModule } from 'primeng/treeselect';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ChipModule,
TreeSelectModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }JavaScript
输出:
