选项列表是网页应用程序中常见的突出功能之一。对于 Angular 2 开发者来说，ng2-select-ex 是一个流行的 npm 包，可用于在应用程序中创建选项列表，让用户可以轻松地搜索和选择选项。在这篇文章中，我们将通过一个详细的 ng2-select-ex 使用教程来帮助您学习如何使用该 npm 包。
前置条件
本文假设您已经对 Angular 2 和 npm 有了基本的了解，并且您已经在项目中安装了 Angular 2。
安装 ng2-select-ex
以下是安装 ng2-select-ex 的 npm 命令：
--- ------- ------------- ------
安装完成后，您需要将 ng2-select-ex 添加到您的 Angular 2 项目中，可以通过以下方式：
1.在你的应用程序模块中导入 Ng2SelectExModule ：
------ - ----------------- - ---- ----------------
-----------
---
-------- -
---
------------------
---
--
---
--
------ ----- --------- - -2.在 HTML 文件中添加组件：
-------------- ------------------- ----------------- ---------------------------- ----------------
在这里，options 属性传递了要显示的选项数组，multiple 属性指定可以选择多个选项，[(ngModel)] 可以将选定的值双向绑定到 selectedValue 变量。
ng2-select-ex 示例
以下是一个完整的示例，演示如何使用 ng2-select-ex 创建具有多选功能的选择列表。
1.在项目根目录下，创建一个名为 ng2-select-ex-demo 的目录，并在其中创建一个名为 index.html 的文件。
2.打开命令行工具，进入 ng2-select-ex-demo 目录，并创建一个新的 Angular 2 项目：
-- --- ---------------------
3.进入新创建的项目目录，并使用以下命令安装 ng2-select-ex：
--- ------- ------------- ------
4.打开 app.module.ts 文件，并在其 imports 数组中导入 Ng2SelectExModule ：
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------------- - ---- ----------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -5.打开 app.component.ts 文件，并编写以下代码：
------ - --------- - ---- ----------------
--------- ---- -
--- -------
----- -------
-
------------
--------- -----------
--------- -
-------------- ----------------- ----------------- --------------------------------------------
----------- ------ -- ------------- - ---- ------
-
--
------ ----- ------------ -
------ ------ - --
--- --
----- ------- ---
-- -
--- --
----- ------- ---
-- -
--- --
----- ------- ---
-- -
--- --
----- ------- ---
---
-------------- ------ - ---
-6.在命令行中进入项目目录，并运行以下命令启动开发服务器：
-- ----- ------
7.打开浏览器，并测试 ng2-select-ex 组件是否可以正确显示。您将看到一个具有多选功能的选项列表。
结论
在本文中，我们展示了如何使用 ng2-select-ex npm 包来创建具有多选功能的选项列表。通过学习此教程，您将了解如何安装 npm 包，将其集成到 Angular 2 项目中，以及将其用于创建用户友好的选择控件。您可以将此知识应用于您自己的 Angular 2 项目中，从而提高您的开发效率，并简化用户在应用程序中的交互。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005763781e8991b448ea935