简介
@ngx-kit/ui-ext-select 是一个 Angular 的 UI 扩展包，主要提供了与 select 相关的组件和指令，使开发者能够轻松实现单选和多选等功能。该组件支持多种常见的数据类型，包括数字、字符串、对象以及其他自定义类型。本文将介绍如何使用 @ngx-kit/ui-ext-select，包括安装、配置与示例。
安装
首先，你需要在自己的 Angular 项目中安装 @ngx-kit/ui-ext-select。
npm i --save @ngx-kit/ui-ext-select
在项目中引入此模块。
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ - --------------- - ---- -------------------------
-----------
-------- -
-- ----- -------
----------------------
----------------
--
-- ---
--
------ ----- --------- - -配置
NgxSelectComponent 选项
在使用 NgxSelectComponent 之前，你可以通过在全局配置中进行设置，实现默认选项的定制。
-- -------------------- ---- -------
------ - --------------- - ---- -------------------------
-----------
-------- -
-- ----- -------
---------------------
------- -
------- -
-------- ------------------
-------- -------------
--------- --- ------- -------
------------ --- ---------
---------- ------
------------ ------ -----
------------------ ---------
--
---------- -----
--
--
---
----------------
--
-- ---
--
------ ----- --------- - -使用 NgxSelectComponent
基本用法
<ngx-select [label]="'Color'" [optionList]="['red', 'green', 'blue']" [(ngModel)]="selectedColor"> </ngx-select>
数组类型
-- -------------------- ---- -------
--------- ---- -
--- -------
----- -------
-
----- ------------ -
-------- - -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- --
--
------------- - ----------
-<ngx-select [label]="'Users'" [optionList]="userList" [(ngModel)]="selectedUsers" [multiple]="true" [optionValueField]="'id'" [optionTextField]="'name'"> </ngx-select>
对象类型
-- -------------------- ---- -------
----- ---- -
------------------ --- ------- ------ ----- ------- --
-
------------
--------- -
-----------
----------------
-----------------------
--------------------------
----------------------------------------
--
--
------ ----- ------------ -
-------- - -
--- ------- ---- -------
--- ------- ---- ------------
--- ------- ------------ -------
--
------------- -----
-自定义模板
使用 ngx-select-item 指令并将其放置在 ngx-select 内部，可以自定义选项的显示。
-- -------------------- ---- -------
------------
--------- -
-----------
----------------
-----------------------
---------------------------
------------ ---------
------------- - --------------
--------------
-------------
--
--
------ ----- ------------ -
-------- - -
- ----- --------- ------ ---- --
- ----- ----------- ------ ---- --
- ----- ---------- ------ ---- --
--
------------- ----
-示例代码
结语
通过本文的介绍，相信读者已经对于 @ngx-kit/ui-ext-select 的使用有了更深入的了解。尽管在介绍中已经将常见用法覆盖，但是此包仍然具备很高的可扩展性，因此非注册成员可以前往 Github 主页索取更多开发文档。感谢你的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c1b