在前端开发中，使用 ng2-select-2 这一 npm 包可以方便地实现下拉选择框等表单元素。本文将介绍如何使用 ng2-select-2，包括安装、基本使用、自定义样式等方面的内容，希望能给读者带来深入的学习和指导意义。
安装
使用 ng2-select-2 之前，需要先安装：
npm install ng2-select-2
在项目中引入 ng2-select-2 需要在 module 中导入相应的模块，例如：
import { NgSelectModule } from '@ng-select/ng-select';
@NgModule({
imports: [NgSelectModule],
// ...
})
export class AppModule { }基本使用
使用 ng2-select-2 的语法如下：
<ng-select [items]="items"
[placeholder]="'Select one'"
bindLabel="name"
bindValue="id"
[(ngModel)]="selectedItem">
</ng-select>其中，items 是一个数组，保存了选项列表。placeholder 是一个占位符，显示在选择框中没有选择任何选项时。bindLabel 和 bindValue 属性分别表示列表项中显示的文本和对应的值。ngModel 是选中的选项，可以初始化为任意值。当用户选择一个选项时，该值会改变。
自定义样式
ng2-select-2 中有许多 CSS 类可以使用，可以用于自定义样式。下面是一些常用的 CSS 类和它们的样式：
-- -------------------- ---- -------
---------- -
------- --- ----- -------- -- -- --
-------------- -- -- -- --
------- ----- -- -- --
---------- ------ -- ---- --
-
---------- -------------------- -
----------------- ----- -- ---- --
-
----------------- -------------------- -
----------------- -------- -- --------- --
-
---------- -------------------- ------------------- -
---------- ------ -- ---- --
-
---------- -------------------- --------- -
---------- ------ -- -------- --
-可以根据需要修改这些样式，实现想要的效果。
示例代码
下面是一个 ng2-select-2 的示例代码：
<ng-select [items]="items"
[placeholder]="'Select one'"
bindLabel="name"
bindValue="id"
[(ngModel)]="selectedItem"
class="my-select"
[class.my-small-select]="isSmall">
</ng-select>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
----- - -
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- -
--
------------ - - --- -- ----- ------- -- --
------- - -----
--- -------------------- ---- ------- ---------- - ------- --- ----- -------- -------------- -- ---------- ------ ------- ----- - ---------------- - ------- ----- -
在这个示例中，items 数组包含了三个选项；selectedItem 初始化为第二个选项；my-select 和 my-small-select 是自定义的 CSS 类，分别表示默认的和小号的下拉选择框。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d0681e8991b448e6ca8