简介
@nbxx/nb-ng-select 是一个 Angular 的下拉选择组件，其中包含了丰富的功能，例如下拉列表搜索、多选、分组、自定义标签等。同时，该组件还提供了许多自定义选项，以满足不同项目的需要。下面将为大家详细介绍如何使用该组件。
安装
您可以通过以下命令安装 @nbxx/nb-ng-select：
npm install @nbxx/nb-ng-select --save
使用
-- -------------------- ---- -------
------ - ---------------- - ---- ---------------------
-----------
-------- -
-- ---
----------------
--
-- ---
--
------ ----- --------- - -添加上面代码中的 NbNgSelectModule 后，即可使用该组件。
基本用法
下拉菜单
在模版中添加 nb-ng-select 标签即可把它渲染出来。例如：
<nb-ng-select [(ngModel)]="selectedFood" [options]="foods"></nb-ng-select>
其中：
[(ngModel)]="selectedFood"：该属性用来传递选中的值；[options]="foods"：该属性定义了下拉菜单的选项。
选项数据
选项数据使用 nb-option 标签定义，例如：
<nb-ng-select [(ngModel)]="selectedFood">
<nb-option value="">请选择食物</nb-option>
<nb-option *ngFor="let food of foods" [value]="food.id">{{ food.name }}</nb-option>
</nb-ng-select>其中：
[value]="food.id"：用来传递选项的值；*ngFor="let food of foods"：用来遍历选项数据。
简化选项
如果您定义的选项仅是简单的字符串，可以使用 nb-option 标签的 nbLabel 属性来简化：
<nb-ng-select [(ngModel)]="selectedFood"> <nb-option nbLabel="请选择食物" value=""></nb-option> <nb-option *ngFor="let food of foods" [nbLabel]="food.name" [value]="food.id"></nb-option> </nb-ng-select>
禁用某个选项
可以添加 disabled 属性来禁用某个选项：
<nb-ng-select [(ngModel)]="selectedFood"> <nb-option nbLabel="请选择食物" value=""></nb-option> <nb-option *ngFor="let food of foods" [nbLabel]="food.name" [value]="food.id" [disabled]="food.disabled"></nb-option> </nb-ng-select>
多个选项
在 nb-ng-select 标签中添加 multiple 属性以允许用户进行多选：
<nb-ng-select [(ngModel)]="selectedFoods" [multiple]="true"> <nb-option *ngFor="let food of foods" [nbLabel]="food.name" [value]="food.id"></nb-option> </nb-ng-select>
selectedFoods 是一个数组，用来保存用户选择的值。
进阶用法
定制选项模板
使用 ng-template 标签自定义选项模板：
<nb-ng-select [(ngModel)]="selectedFood" [optionTemplate]="optionTemplate">
<ng-template #optionTemplate let-option="option">
<span>{{ option.label }}</span>
<span *ngIf="option.disabled">(已禁用)</span>
</ng-template>
<nb-option *ngFor="let food of foods" [nbLabel]="food.name" [value]="food.id" [disabled]="food.disabled"></nb-option>
</nb-ng-select>以上代码中，#optionTemplate 是一个本地引用，用于在 nb-ng-select 中引用自定义的选项模板。选项模板的变量 option 是一个对象，其中包含以下属性：
label：选项的标签；disabled：true表示选项被禁用。
搜索
使用 searchable 属性允许用户可以进行搜索，在 nb-ng-select 标签中添加以下代码即可：
<nb-ng-select [(ngModel)]="selectedFood" [searchable]="true"> <nb-option *ngFor="let food of foods" [nbLabel]="food.name" [value]="food.id"></nb-option> </nb-ng-select>
分组
使用 optgroup 标签来定义选项的分组：
<nb-ng-select [(ngModel)]="selectedCountry">
<optgroup *ngFor="let group of countries" [nbLabel]="group.title">
<nb-option *ngFor="let option of group.items" [nbLabel]="option.label" [value]="option.value"></nb-option>
</optgroup>
</nb-ng-select>countries 是一个数组，用来定义选项的分组。
创建选项标签
使用 tags 属性允许用户创建自定义选项标签，如下：
<nb-ng-select [(ngModel)]="selectedFruits" [multiple]="true" [tags]="true"> <nb-option *ngFor="let fruit of allFruits" [nbLabel]="fruit.label" [value]="fruit.value"></nb-option> </nb-ng-select>
在这个例子中，当用户选择既没有提供的选项，又不在选项列表中时，就会创建一个新的选项。
禁止新建标签
当 tags 选项被启用时，可以使用 addTag 属性来禁止用户创建新标签：
<nb-ng-select [(ngModel)]="selectedFruits" [multiple]="true" [tags]="true" [addTag]="false"> <nb-option *ngFor="let fruit of allFruits" [nbLabel]="fruit.label" [value]="fruit.value"></nb-option> </nb-ng-select>
在这个例子中，用户只能从提供的选项列表中进行选择。
限制选项
使用 maxSelectedItems 属性来限制可以选中的最大项数：
<nb-ng-select [(ngModel)]="selectedFruits" [multiple]="true" [maxSelectedItems]="3"> <nb-option *ngFor="let fruit of allFruits" [nbLabel]="fruit.label" [value]="fruit.value"></nb-option> </nb-ng-select>
在这个例子中，用户只能选择最多三个选项。
结论
@nbxx/nb-ng-select 是一个功能丰富的 Angular 下拉选择组件，提供了许多自定义选项，用于满足不同项目的需求。在实际开发中，您可以根据需要选择和配置不同的选项，以达到最佳效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e24485e