什么是 ngx-pick-list
ngx-pick-list 是一个基于 Angular 的前端组件库，它提供了一个可拖拽的可选择列表，可以帮助用户从一个列表中选择一些值并将其移动到另一个列表中。它适用于需要向用户提供一个选择器的所有场景，例如电子商务网站上的购物车、面向团队的协作应用程序等等。ngx-pick-list 提供了丰富的 API 和配置项，可以满足各种不同的需求。
如何使用 ngx-pick-list
安装
要使用 ngx-pick-list，需要在 Angular 项目中进行安装，可以使用 npm 进行安装。
npm install ngx-pick-list --save
导入模块
在 Angular 项目中使用 ngx-pick-list，必须要在 app.module.ts 中导入 PickListModule。
-- -------------------- ---- -------
------ - -------------- - ---- ----------------
-----------
-------- -
-- ---
---------------
--
-- ---
--
------ ----- --------- - -使用
在您的组件中，您可以通过 ngx-pick-list 创建一个可选择列表。它需要一个列表数据源（可能是您向用户显示的所有选项）和一个已选择的列表数据源（可能与用户最终选择的值一起提交）。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- ----------------
------------
-- ---
--
------ ----- ----------- -
----------- -------------- - -
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
--
----------- -------------- - -
- --- -- ------ --------- ---- -- --
- --- -- ------ --------- ---- -- --
--
-<ngx-pick-list [source]="sourceList" [target]="targetList"> </ngx-pick-list>
在上面的示例中，您将获得一个默认的 ngx-pick-list 列表，它具有样式和默认选项。您可以自定义该组件的样式、模板，并能自己处理所需的事件，以便构建出需要的UI/UX。
配置项
ngx-pick-list 提供了多种配置项，以帮助自定义组件以适应不同的需求。
[source]
source 属性用于指定源列表，它应该是一个 PickListItem[] 数组。
<ngx-pick-list [source]="sourceList" ... > </ngx-pick-list>
[target]
target 属性用于指定已选择的列表，它应该是一个 PickListItem[] 数组。
<ngx-pick-list ... [target]="targetList" > </ngx-pick-list>
[sourceHeader]
sourceHeader 属性用于指定源列表的标题。
<ngx-pick-list ... [sourceHeader]="'Source Items'" > </ngx-pick-list>
[targetHeader]
targetHeader 属性用于指定已选列表的标题。
<ngx-pick-list ... [targetHeader]="'Selected Items'" > </ngx-pick-list>
[dragdrop]
dragdrop 属性指定是否允许拖动和放置项目。
<ngx-pick-list ... [dragdrop]="false" > </ngx-pick-list>
[dragdropScope]
dragdropScope 属性用于指定拖拽的作用域。当有多个 ngx-pick-list 存在，需要限制拖动和放置的列表时，可以使用该属性。
-- -------------------- ---- ------- -------------- --- -------------------------- - ---------------- -------------- --- -------------------------- - ----------------
[filter]
filter 属性开启过滤器，可以在已添加的可选择值里过滤，查找匹配的选项。
<ngx-pick-list ... [filter]="true" > </ngx-pick-list>
[filterPlaceholder]
filterPlaceholder 属性设置用于过滤文本输入框的占位符。
<ngx-pick-list ... [filterPlaceholder]="'Search...'" > </ngx-pick-list>
结束语
ngx-pick-list 组件是一个可以大大提高前端工作效率的工具。它可以非常容易地构建出各种场景的选择器，让用户可以轻松选择所需的内容。在学习和使用 ngx-pick-list 组件时，请注意使用上述的配置项，以优化您的开发过程。如有问题，欢迎访问 GitHub repo 查阅项目文档，也可以提 issues 寻求帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e3d9381d61a3540a02