简介
Angular2-multiselect-dropdown-invectra 是一个 Angular2 应用程序的下拉多选列表控件。该控件可以帮助开发人员在他们的应用程序中实现下拉多选列表。
安装
首先，我们需要用 npm 安装 angular2-multiselect-dropdown-invectra：
npm install angular2-multiselect-dropdown-invectra --save
使用步骤
步骤 1：导入模块
在你的 app.module.ts 文件中，导入 angular2-multiselect-dropdown-invectra 模块：
-- -------------------- ---- -------
------ - ------------------------- - ---- -----------------------------------------
---
-----------
-------- -
----
-------------------------
--
---
--
------ ----- --------- - -步骤 2：设置下拉多选控件选项
在你的组件.ts 文件中，设置下拉多选控件选项：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
---
------------
---
--
------ ----- ------------ -
------------ - ---
------------- - ---
---------------- - ---
---
---------- -
----------------- - -
- --- -- --------- ------- --
- --- -- --------- ----------- --
- --- -- --------- ----------- --
- --- -- --------- -------- --
- --- -- --------- ------ ------ --
- --- -- --------- --------- --
- --- -- --------- -------- --
- --- -- --------- -------- --
- --- -- --------- ------- --
- --- --- --------- -------- -
--
------------------ - -
- --- -- --------- ----------- --
- --- -- --------- ----------- --
- --- -- --------- -------- --
--
--------------------- - -
---------------- ------
-------- -----
---------- -----------
-------------- ------- -----
---------------- --------- -----
--------------- --
------------------ ----
--
-
------------------ ---- -
------------------
-
------------------ ---- -
-------------------
-
---
-步骤 3：在组件模板中使用下拉多选控件
在组件模板中，通过以下方式使用下拉多选控件：
<angular2-multiselect [data]="dropdownList"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)">
</angular2-multiselect>指导意义
本教程介绍了如何使用 angular2-multiselect-dropdown-invectra 下拉多选控件。通过使用本控件，开发人员可以轻松实现下拉多选列表，因此能够提高应用程序的用户体验。
示例代码
本教程使用的示例代码可在以下链接中获得：
https://github.com/vijaychauhan007/angular2-multiselect-dropdown-invectra-tutorial
结论
现在，你已经知道了如何使用 angular2-multiselect-dropdown-invectra 控件。希望这个教程对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672eb0520b171f02e1e9d