Angular 2选择带有树项的组件 - ngx-tree-select

Angular 2选择带有树项的组件 - ngx-tree-select
插件名称 ngx-tree-select
发布时间 2021年2月24日
插件作者 Crazyht

具有分层树支持的多功能Angular 2多选组件。

特征:

  • 带有“扁平”项目的下拉菜单(类似于常规选择)
  • 带有分层项目的下拉菜单
  • 简单或多个所选项目
  • 使用分层数据,您可以强制选择子项或允许选择父项
  • 符合ngModel和标准验证
  • 可以限制显示的所选项目(…链接允许您的用户查看整个选择)

安装

这是安装组件的方法:

npm install ngx-tree-select

或者

yarn add ngx-tree-select

在您的应用程序模块上:

import {NgxTreeSelectModule} from 'ngx-tree-select';

@NgModule({
  declarations: [ ...],
  imports: [
    BrowserModule,
    ....,
    NgxTreeSelectModule.forRoot({
      allowFilter: true,
      filterPlaceholder: 'Type your filter here...',
      maxVisibleItemCount: 5,
      idField: 'id',
      textField: 'name',
      childrenField: 'children',
      allowParentSelection: true
    })
],
})
export class AppModule { }

默认选项

回调NgxTreeSelectModule.forRoot您必须传递默认选项。此选项可以是空对象“ {}”,也可以添加一个或多个设置:

  • allowFilter:在下拉列表中显示过滤器输入
  • filterPlaceholder:确定过滤器的占位符文本
  • maxVisibleItemCount:确定在多次选择时显示的最大项目数
  • idField:确定项目的哪个属性用作唯一标识符
  • textField:确定显示项目的哪个属性
  • childrenField:确定您的商品的哪个属性包含子商品
  • allowParentSelection:如果设置为true,则可以选择父级,否则选择所有父级时
  • expandMode:定义在初始化时展开的项目。可能的值是:NoneSelectionAll