前言
在前端开发过程中，有时候需要实现下拉选择框，这时你会发现 Angular 框架提供的 select 控件并不能满足特定需要。而 @the-mx-group/ng-select 包的出现，为我们提供了更为灵活、易用的下拉选择框组件。
安装和引用
在命令行中使用 npm 或 yarn 安装 @the-mx-group/ng-select 包：
npm install @the-mx-group/ng-select
或者
yarn add @the-mx-group/ng-select
在模块中引用该包：
-- -------------------- ---- -------
------ - -------------- - ---- --------------------------
-----------
-------- -
--------------
--
-- ---
--
------ ----- --------- - -在模板中使用该组件：
<ng-select [items]="items"
[(ngModel)]="selectedItem"
[multiple]="true"
bindLabel="name"
[searchFn]="search"
(change)="onSelect($event)">
</ng-select>API
Inputs
items: 必选项，下拉列表数据，ngModel: 选中项绑定变量，multiple: 是否支持多选，默认为 false，bindLabel: 选择项用来展示的属性名，默认为 name，searchFn: 自定义搜索函数，placeholder: 未选择时显示的占位符，clearable: 是否支持清空已选项，默认为 true，searchable: 是否支持搜索，默认为 true，addTag: 是否支持添加新选项，默认为 false，loading: 是否显示加载中状态，disabled: 是否禁用下拉选择框。
Outputs
change: 当选择项发生变化时触发的事件。
样式
该组件提供了默认样式，如果想要修改样式，可以使用以下类名：
.ng-select-container: 容器样式，.ng-select-dropdown: 下拉框样式，.ng-option: 选项样式，.ng-option-selected: 选中项样式。
示例
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---------- ---------------
--------------------------
-----------------
----------------
-------------------
----------------------------
---------- ----------- ---- -- ------ ----------------- --------- --------------
------------
--
--
------ ----- ------------ -
----- - -
- ----- ------ ------ --- --
- ----- ------ ------ --- --
- ----- ------ ------ --- --
- ----- ------ ------ --- --
--
------------ - ---
-- -------
------------ ------- ----- ----- ------- -
------ --------------------------------------------------- - ---
-
-- -------------
--------------- ---- -
-------------------
-
-结语
@the-mx-group/ng-select 包是一个非常好用的下拉选择框组件，它提供了丰富的 API 和默认样式，并支持自定义样式。希望本文能帮助读者更好地使用该组件，也希望读者在使用该组件时，能够充分发挥和挖掘该组件的潜力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668081e8991b448e2956