在前端开发中，选择控件是不可避免的事情。而ng-select是一个非常方便的npm包，它提供了强大的选择功能，支持单选、多选、搜索等功能，同时还非常易于使用。本文将为大家详细介绍如何使用ng-select，以及在项目实践中如何利用ng-select来提升开发效率。
安装ng-select
在使用ng-select之前，我们需要先安装它。在命令行中输入如下命令即可完成安装：
npm install ng-select --save
同时，我们还需要在我们的项目中引入该包。我们可以在app.module.ts中添加如下代码：
-- -------------------- ---- -------
------ - -------------- - ---- -----------------------
-----------
---
-------- -
---
--------------
--
---
--
------ ----- --------- - -基本使用
在引入ng-select之后，我们就可以开始使用它提供的功能啦。其实，ng-select的使用非常简单，我们只需要在需要添加选择控件的地方添加一个ng-select标签即可。例如，下面是一个使用ng-select实现单选的例子：
<ng-select [items]="['苹果', '橙子', '香蕉', '菠萝']" [placeholder]="'请选择水果'" [(ngModel)]="selectedFruit"></ng-select>
其中，我们通过items属性来指定可选项，[placeholder]用于设置默认占位符，以及通过[(ngModel)]来双向绑定选中的值。这三个属性就是ng-select最基本的使用方式。
进阶使用
除了基本的单选功能之外，ng-select还提供了更多的高级功能，我们可以通过对组件属性的设置来实现这些功能。
多选
想要实现多选功能，只需要在ng-select标签中添加属性multiple即可。例如：
<ng-select [items]="['苹果', '橙子', '香蕉', '菠萝']" [placeholder]="'请选择水果'" [(ngModel)]="selectedFruits" [multiple]="true"></ng-select>
远程数据
当可选项较多时，我们需要从服务器获取数据。ng-select的远程数据加载功能非常强大，只需要在items属性中指定一个函数即可。例如：
loadData(query: string = '') {
return this.http.get(`https://api.github.com/search/repositories?q=${query}&sort=stars&order=desc`)
.toPromise()
.then((res: any) => res.items.map(item => item.full_name));
}
<ng-select [items]="loadData" bindLabel="name" [loading]="loading" [typeahead]="searchText"></ng-select>在这个例子中，我们使用了Github的API来获取数据。同时，我们还指定了bindLabel属性来指定显示文本的字段，以及使用了loading和typeahead属性来实现搜索功能。
自定义选项
当ng-select内置样式无法满足我们的需求时，我们可以通过设置template属性来自定义样式：
<ng-select [items]="['苹果', '橙子', '香蕉', '菠萝']" [(ngModel)]="selectedFruit">
<ng-template ng-option-tmp let-item="item" let-search="searchTerm">
{{ item }} <span class="badage" *ngIf="item==='香蕉'">推荐</span>
</ng-template>
</ng-select>在这个例子中，我们使用了ng-option-tmp模板来自定义每个选项的样式。同时，我们还在香蕉上添加了一个推荐的标记。
总结
通过本文，我们学习了如何使用ng-select，以及如何利用ng-select来提升开发效率。ng-select提供了非常强大的选择功能，同时也非常容易使用。在实践中，我们可以根据自己的需求来设置组件属性，来实现多种高级功能。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57714