ng2-select-exposit 是一款基于 Angular 2+ 的下拉列表组件，它允许用户从一组选项中选择一个或多个选项。该组件可以自动搜索选项，并支持添加自定义选项。ng2-select-exposit 基于支持响应式设计的 Angular 2+ 框架，因此具有良好的可扩展性和可维护性。
安装
要使用 ng2-select-exposit，你需要先在你的项目中安装它。你可以通过以下命令将其添加到项目中的 package.json 文件中：
npm install --save ng2-select-exposit
使用示例
在你的 Angular 2+ 项目中使用 ng2-select-exposit，需要在你的 NgModule 中导入 ExpositSelectModule。例如：
-- -------------------- ---- -------
------ - ------------------- - ---- ---------------------
-----------
------------- -
------------
--
-------- -
--------------
-------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -现在，你就可以在组件中使用 ng2-select-exposit 了。例如，在组件的 HTML 模板中使用 ng2-select-exposit，你可以这样编写：
<exposit-select [options]="optionsList" [(ngModel)]="selectedOption"></exposit-select>
其中，optionsList 是你的选项列表数组，selectedOption 是你的选择结果。
API 介绍
options：Array<string|number|{id, text}> 可选项列表。displayField：string 显示在列表中的字段名。valueField：string 指定的值字段名。multiple：boolean 是否允许多选。selected：Array<{id, text}> 初始选中项。placeholder：string 提示文字。disabled：boolean 是否禁用。
高级用法
ng2-select-exposit 提供了许多高级功能，例如利用 Observables 来实现动态搜索、自定义选项等。
动态搜索
ng2-select-exposit 支持动态搜索选项。要启用它，你需要通过设置 searchFn 属性来定义一个函数，该函数可以用来实现搜索。例如，在你的组件中，你可以这样定义 searchFn：
searchFn(term: string, items: Array<any>) {
return items.filter(i => i.text.indexOf(term) >= 0);
}然后，你就可以在 exposit-select 标签中添加 searchFn 属性，以用于启用动态搜索：
<exposit-select [options]="optionsList" [searchFn]="searchFn" [(ngModel)]="selectedOption"></exposit-select>
现在，当用户输入选项名称时，ng2-select-exposit 将自动启用搜索功能。
自定义选项
ng2-select-exposit 还支持添加自定义选项。要启用它，你需要通过设置 addOptionText 属性来定义添加文本，同时设定 addOption 属性为 true。例如：
<exposit-select [options]="optionsList" [addOption]="true" addOptionText="Create new" [(ngModel)]="selectedOption"></exposit-select>
现在，当用户输入一个不存在的选项时，ng2-select-exposit 将自动显示一个“Create new”选项，允许用户输入新选项并将其添加到选项列表中。
源代码示例
下面是一个完整的 ng2-select-exposit 示例代码，包含了本文中介绍的所有参数和高级用法：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---------------------- -------
-----
---------
--------------- ----------------------- ----------------------------------------------
-------------------------------
------
-----
---------
--------------- ----------------------- ----------------- ------------------------------------------------------
----- ----------- ---- -- ------------------------------------- -------
------
-----
-----------
--------------- ----------------------- --------------------- ----------------------------------------------
-------------------------------
------
-----
------------
--------------- ----------------------- ------------------ --------------------- ---- ----------------------------------------------
-------------------------------
------
--
--
------ ----- ------------ -
------ ----------- - -
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- --- ----- ------- --- -
--
------ -------------- - ---
------ ---------------------- - ---
-------------- ------- ------ ----------- -
------ -------------- -- -------------------- -- ---
-
-##总结
ng2-select-exposit 是一款开源的 Angular 2+ 组件，它可以用于实现下拉列表等功能。它具有良好的可扩展性和可维护性，并支持许多高级功能，例如动态搜索、自定义选项等。如果你正在开发 Angular 2+ 应用程序，ng2-select-exposit 是一个值得一试的组件库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b1b81e8991b448e538b