npm 包 @perfectlynormal/ng2-select-compat 使用教程

什么是 ng2-select-compat

ng2-select-compat 是一个针对 Angular 2+ 的 Select 下拉组件。它能让你快速添加一个 Select 功能，同时提供了许多自定义选项。

安装

使用 npm 进行安装：

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

如何使用

引入模块

在需要使用 ng2-select-compat 的模块中进行引入。

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

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

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

简单示例

在组件中使用 ng2-select 组件。

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

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

高级示例

在组件中使用 ng2-select 组件，并对一些选项进行自定义。

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

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

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

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

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

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

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

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

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

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

参考

  1. ng2-select-compat Github 仓库
  2. NgSelect Github 仓库
  3. Select2 官方网站

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005663081e8991b448e21af

阅读全文

猜你喜欢

  • npm 包 sirius-echo 使用教程

    简介 sirius-echo 是一个用于前端开发的 npm 包，它可以使你使用 echo 函数来打印信息。echo 函数和 console.log 函数非常相似，但是 echo 可以在生产环境中进行打...

    3 年前
  • npm 包 qqmap 使用教程

    随着移动互联网的发展，越来越多的应用需要依赖地图服务。其中一个非常常见的地图服务是腾讯地图，而 npm 包 qqmap 就提供了非常方便的腾讯地图 API 的使用方法。

    3 年前
  • npm 包 electron-titlebar-absolute 使用教程

    在开发 Electron 应用时常常需要自定义窗口标题栏，这时候可以使用 npm 包 electron-titlebar-absolute。本文将详细介绍该包的使用方法，并提供示例代码以供参考。

    3 年前
  • npm 包 react-slide-indexer 使用教程

    前言 在前端开发中，我们经常需要使用到轮播功能，并且一般都需要自定义控制指示器。react-slide-indexer 就是一个便捷的 npm 包，让我们可以快速简单地实现轮播和指示器控制功能。

    3 年前
  • npm 包 fun-router 使用教程

    什么是 fun-router？ fun-router 是一个用于前端路由的 npm 包。它可以帮助开发者快速搭建基于路径的前端路由系统，并且支持多级路由和嵌套式路由。

    3 年前
  • npm 包 gp4test 使用教程

    简介 在前端开发中，我们经常需要进行单元测试、集成测试等，而 npm 上有很多测试框架可供选择。今天我们介绍的是 gp4test 这个 npm 包。gp4test 是一个基于 Mocha 和 Chai...

    3 年前
  • npm 包 l4n-server 使用教程

    前言 随着前端技术的不断发展，前端开发的复杂度也逐渐增加。在这个过程中，npm 成为了前端开发必不可少的工具之一，其中 l4n-server 是一个非常实用的 npm 包，可以帮助开发者搭建本地服务器...

    3 年前
  • npm 包 rerpc 使用教程

    rerpc 是一个支持 Restful API 设计原则的 JavaScript 包。它可以让你更轻松地使用 jsonapi 规范来设计和实现你的 API 接口。通过 rerpc，你可以更好地组织你的...

    3 年前
  • npm 包 await-fs 使用教程

    在 Web 前端开发中，常常需要进行文件读写操作。Node.js 提供了丰富的文件系统 API，但使用过程中需要考虑回调函数、错误处理等等，会显得比较繁琐。而使用 Promise 可以方便地进行异步编...

    3 年前
  • npm 包 l4n-server-providerlink 使用教程

    本文将介绍 npm 包 l4n-server-providerlink 的使用方法。l4n-server-providerlink 是一个前端工具，能够帮助我们快速搭建一个本地的服务器，用于模拟接口，...

    3 年前
  • npm 包 vcdb-monte-carlo 使用教程

    简介 vcdb-monte-carlo 是一个基于 Monte Carlo 方法的虚拟用户输入数据生成工具。它可以用于前端性能测试、负载测试等场景。vcdb-monte-carlo 的使用需要 npm...

    3 年前
  • npm 包 verminal-plus 使用教程

    什么是 verminal-plus？ verminal-plus 是一个基于 Node.js 和 electron 技术的跨平台终端应用程序。它支持多标签页、多窗口、多终端等特性，并提供了丰富的主题和...

    3 年前
  • npm 包 download-prog 使用教程

    在前端开发中，经常需要下载文件并显示下载进度。这时候 npm 包 download-prog 就能派上用场了。本文将介绍 download-prog 的使用方法，并提供示例代码，帮助读者快速上手。

    3 年前
  • npm包kiko-swh使用教程

    前言 npm是JavaScript世界里最流行的包管理工具之一，几乎所有的前端框架、模块等都可以通过npm安装使用。在前端开发中，有很多优秀的npm包可以帮助我们更快更好地完成开发任务。

    3 年前
  • npm 包 react-native-bind 使用教程

    介绍 react-native-bind 是一款用于 React Native 应用中进行数据绑定的 npm 包。它可以将数据源中的数据自动绑定到目标组件上，使得组件渲染时不需要手动获取数据。

    3 年前
  • npm 包 react-simple-read-more 使用教程

    简介 在前端开发中，我们经常需要实现点击“查看更多”功能，供用户展开和收起文章内容。而 react-simple-read-more 是一个轻量级的 React 无状态组件，它可以帮助我们快速实现这一...

    3 年前
  • npm 包 @apropos/maybe 使用教程

    介绍 在前端开发中，大多数数据都是从后端接收并渲染到页面上的。但是，由于后端的数据经常不是完整的，甚至可能缺失某些重要的字段，这就导致了在前端进行数据处理的难度。 在函数式编程中，Maybe 是一个类...

    3 年前
  • npm 包 @apropos/either 使用教程

    在前端开发中，我们经常会遇到需要处理函数返回结果的情况。有时候我们需要关心的是成功的情况，有时候我们需要关心的是出错的情况。为了解决这个问题，我们可以使用 either 类型。

    3 年前
  • npm包@apropos/tuple使用教程

    简介 在前端开发过程中，我们经常需要对多个值进行组合和操作，这时候我们可以使用元组（tuple）来表示。元组是一种不可变的序列数据类型，其中的每个元素都可以是不同类型的数据。

    3 年前
  • npm 包 vue2-sentry 使用教程

    随着前端项目的复杂性不断提高，一些新的问题也不断出现，例如代码错误和异常。而 Sentry 是一个开放源代码的异常追踪系统，可以帮助我们快速识别和排查问题。在 Vue 2 项目中，可以使用 npm 包...

    3 年前

相关推荐

    暂无文章