极客教程Angular PrimeNG Form 树选择多组件
Angular PrimeNG是一个开源的库，由原生的Angular UI组件组成，用于实现出色的造型，这个框架用于制作响应式网站，非常容易。在这篇文章中，我们将看到Angular PrimeNG Form TreeSelect Multiple Component.
TreeSelect组件允许用户从分层数据中选择项目。它接受一个TreeNodes数组作为其选项属性来显示数据。在TreeSelect多选模式下，可以选择一个以上的项目，默认情况下，所选项目将用逗号隔开，当所选项目超过TreeSelect组件时，将以省略号作为后缀。
Angular PrimeNG Form Tree选择多个属性：
- options。一个TreeNodes数组被传递给该属性以显示TreeSelect选项。
- metaKeySelection。这个属性用于定义如何选择多个项目的行为。当设置为false时，每个项目的选择可以单独切换，否则需要按下metaKey来选择/取消选择一个项目。默认值为true。
- selectionMode。它用于设置TreeSelect的选择模式。它接受 “单选”、”多选 “和 “复选框 “作为其值。默认值是 “单选”。
- display。此属性定义了所选项目的显示方式。接受的值是 “逗号 “和 “芯片”。默认值是 “chip”。
- placeholder。该属性用于设置TreeSelect的占位符标签，当没有选择任何项目时，该标签将被显示。
语法:
<p-treeSelect
[(ngModel)]="..."
selectionMode="multiple"
[options]="..."
[metaKeySelection]="false"
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：这是一个基本的例子，演示了TreeSelct组件中多重选择的使用。
- app.component.html:
<h2 style="color: green">GeeksforGeeks</h2>
<h3>
Angular PrimeNG Form
TreeSelect Multiple Component
</h3>
<p-treeSelect
[(ngModel)]="selected"
selectionMode="multiple"
[options]="nodes"
[metaKeySelection]="false"
placeholder="Select Nodes">
</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组件的显示属性设置为 “chip”，这样所选项目将显示为一个chip，而不是用逗号分隔。
- app.component.html:
<h2 style="color: green">GeeksforGeeks</h2>
<h3>
Angular PrimeNG Form
TreeSelect Multiple Component
</h3>
<p-treeSelect
[(ngModel)]="selected"
selectionMode="multiple"
display="chip"
[options]="nodes"
[metaKeySelection]="false"
placeholder="Select Nodes">
</p-treeSelect>
- 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"
}
]
}
];
}
}
- 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 { }
输出:
