npm包@jaspero/ng2-select使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常需要使用下拉列表控件，而@jaspero/ng2-select就是一个Angular2的下拉列表控件，它提供了丰富的属性和事件，能够满足我们大多数的需求。本文将详细介绍如何在Angular2项目中使用@jaspero/ng2-select。

安装和引用

安装npm包

我们可以使用以下命令在项目中安装@jaspero/ng2-select：
```
npm install @jaspero/ng2-select --save
```

引用组件

在需要使用@jaspero/ng2-select的组件中，首先需要在app.module.ts文件中引入Ng2SelectModule：

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

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

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

然后在需要使用下拉列表控件的组件中，使用以下代码引用select组件：

<ng-select [options]="options"></ng-select>

上面的options是一个对象数组，下面我们来看一下如何定义它。

属性

@jaspero/ng2-select提供了以下常用的属性：

options

options是下拉列表中的选项，它可以是一个简单的字符串数组、对象数组或以另一个对象的属性作为key的对象。下面是一个字符串数组的示例：
```
options: string[] = ['Option 1', 'Option 2', 'Option 3'];
```
下面是一个对象数组的示例：
```
options: any[] = [
    { id: 1, name: 'Option 1' },
    { id: 2, name: 'Option 2' },
    { id: 3, name: 'Option 3' }
];
```
另外，我们可以将options属性设置为一个Promise对象，以实现动态加载选项的功能。
```
Promise.resolve([
    { id: 1, name: 'Option 1' },
    { id: 2, name: 'Option 2' },
    { id: 3, name: 'Option 3' }
])
.then(options => {
    this.options = options;
});
```
对于对象数组，我们需要使用[valueField]和[labelField]属性来指定哪个属性作为值和标签。默认情况下，会使用id作为值，name作为标签。
```
<ng-select [options]="options" [valueField]="'id'" [labelField]="'name'"></ng-select>
```
multiple

multiple属性设置是否允许多选。默认情况下，它是false，即不允许多选。如果要支持多选，只需将其设置为true即可。
```
<ng-select [options]="options" [multiple]="true"></ng-select>
```
hideSelected

hideSelected属性设置是否隐藏已选项。默认情况下，它是false，即不隐藏已选项。
```
<ng-select [options]="options" [hideSelected]="true"></ng-select>
```
placeholder

placeholder属性设置下拉列表的占位符。默认情况下，它是"Select ..."。
```
<ng-select [options]="options" placeholder="Please select"></ng-select>
```
noFilter

noFilter属性设置是否禁用过滤器。默认情况下，它是false，即启用过滤器。
```
<ng-select [options]="options" [noFilter]="true"></ng-select>
```
noSort

noSort属性设置是否禁用排序。默认情况下，它是false，即启用排序。
```
<ng-select [options]="options" [noSort]="true"></ng-select>
```
appendTo

appendTo属性设置下拉列表的父元素。默认情况下，它是body。
```
<ng-select [options]="options" appendTo="myDiv"></ng-select>
```
如果想要将下拉列表放到指定的div中，请替换myDiv为自己的元素。

事件

@jaspero/ng2-select提供了以下常用的事件：

change

change事件在选择项发生改变时触发。它会传递一个值或对象数组或空数组或undefined。下面是一个示例：
```
<ng-select [options]="options" (change)="onChange($event)"></ng-select>
```
然后在组件中定义onChange方法：
```
onChange($event: any) {
    console.log($event);
}
```

open

open事件在下拉列表打开时触发。

<ng-select [options]="options" (open)="onOpen()"></ng-select>

然后在组件中定义onOpen方法：

onOpen() {
    console.log('opened');
}

close

close事件在下拉列表关闭时触发。

<ng-select [options]="options" (close)="onClose()"></ng-select>

然后在组件中定义onClose方法：

onClose() {
    console.log('closed');
}

总结

到这里，我们已经了解了@jaspero/ng2-select的常用属性和事件，以及如何在Angular2项目中使用它。它的丰富性和易用性使得它成为了我们项目中的重要组件。希望本文对您有所帮助。最后，附上一个完整的示例代码：

<ng-select [options]="options" [valueField]="'id'" [labelField]="'name'" [multiple]="true" placeholder="Please select" (change)="onChange($event)" (open)="onOpen()" (close)="onClose()"></ng-select>

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

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

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

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

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

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