在前端开发中，经常需要实现一些输入框的自动补全、标签等功能。saaksin-ngx-chips 就是一款可以实现这些功能的 npm 包。下面我们就来详细介绍一下如何使用。
安装
npm install --save saaksin-ngx-chips
使用方法
1. 导入模块
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------- - ---- ----------------- ------ - -------------- - ---- -------------------- ----------- ------------- --------------- -------- --------------- ------------ ---------------- ---------- -------------- -- ------ ----- --------- --
2. 添加 Chips 同步支持
将 FormsModule 导入项目的模块中，然后将 NgModel 绑定到你的属性上。
<ngx-chips [(ngModel)]="selectedItems"></ngx-chips>
3. 添加 Chips 异步支持
首先，在 app.module.ts 文件中添加 HttpClientModule：
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [BrowserModule, FormsModule, NgxChipsModule, HttpClientModule],
})然后，在组件中设置输入框的属性：
<ngx-chips display-property="text" [search-async]="searchFn.bind(this)" placeholder="Please Select Ingredient or add a new one" ></ngx-chips>
4. 添加 Chips 搜索支持
-- -------------------- ---- -------
------ ----- ------------ -
----- - -
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- ------ --
- --- -- ----- ------- --
- --- -- ----- -------- -
--
-------------- -------- ----------------- -
------ ------------------------- -- --------------------------------------------------- - -----
-
-5. Chips 选项修饰
<ngx-chips>
<ngx-chips-item *ngFor="let item of chipsItems" [value]="item.id">
{{item.name}}
</ngx-chips-item>
</ngx-chips>6. Chips 自定义列表选项
<ngx-chips>
<ng-template let-item="value">
<div>{{item.name}} ({{getCountryName(item.country)}})</div>
</ng-template>
</ngx-chips>示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- -- - ---- -------
------ - ----------- - ---- --------------------
------------
--------- -----------
--------- -
-----------
--------------- ----------- ---- -- ------ ------------------
-- --------- --
-----------------
------------
-
--
------ ----- ------------ -
----- - -
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- ------ --
- --- -- ----- ------- --
- --- -- ----- -------- -
--
-本文介绍了 npm 包 saaksin-ngx-chips 的使用方法，希望能够帮助到各位前端开发者。它可以帮您实现输入框的自动补全、标签等功能，无需手动编写代码，非常方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601281e8991b448de115