npm 包 @mobsolutions/ngx-dadata 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们常常会涉及到输入框自动补全的需求，而且自动补全的词条需要与后端数据库或者 API 进行交互。这时，我们可以用到 @mobsolutions/ngx-dadata 这个 npm 包，该包提供了一种输入自动补全的方式，支持根据关键字从后端获取数据，也支持自定义提供数据。

安装

在终端中输入以下指令来安装此 npm 包：

npm install @mobsolutions/ngx-dadata

使用

在使用前，需要导入 NgxDadataModule 模块并将其包含在 import 数组中。具体使用步骤如下：

导入 NgxDadataModule 模块

-- -------------------- ---- -------
------ - --------------- - ---- ---------------------------

-----------
  -------- -
    -- ----- ----------
    ----------------
  --
--
------ ----- --------- --

页面 HTML 代码

在输入框中添加 ngx-dadata 标签，并绑定相关属性和方法，示例代码如下：

<!-- basic setup -->
<input
  ngxDadata
  [(ngModel)]="model"
  [config]="config"
  (onSelected)="onSelected($event)"
  #dadataInput
/>

[(ngModel)]="model"：指定输入框绑定的变量。
[config]="config"：配置项，具体参数可以参考 ngx-dadata。其中，apiKey 是前往 dadata.ru 注册后获取的 API key，然后使用此 API key 可以从第三方接口中获取数据，比如地址、名称等等。
(onSelected)="onSelected($event)"：选中某个选项后，触发的回调函数。其中，$event 是当前选中的值。

组件 TypeScript 代码

在组件中，需要指定相关属性并在 onSelected 方法中处理选中事件，示例代码如下：

-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------

------ - ------------------ - ---- ---------------------------

------------
  --------- -----------
  --------- ------
--
------ ----- ------------ -
  ------------------------------ ------- -------------------

  ------ - -
    -- ---- ---------
  --
  ------ ----

  ---------------- -
    --------------------- ------- ------
  -
-

自定义返回数据

如果不需要从后端获取数据，可以使用 data 参数自定义返回数据，如下所示：

<input
  ngxDadata
  [(ngModel)]="model"
  [data]="['北京市', '上海市', '广州市', '深圳市']"
/>

总结

以上是 @mobsolutions/ngx-dadata 这个 npm 包的使用教程，感谢大家的阅读。通过本篇文章，我们可以了解到如何使用这个 npm 包，并能在实际项目中应用。同时，也希望读者能够继续深入学习更多的前端知识。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60067380890c4f72775841d5