angular2的select多选插件ng-multiselec

最近项目需要用到select多选框，故找了一些插件，最终选择了ng-multiselect-dropdown插件，下面将整个过程记录下来。
1 首先在项目文件中导入插件 npm i ng-multiselect-dropdown
2 插件的github地址为 https://github.com/NileshPatel17/ng-multiselect-dropdown
3 参考文档使用

• 在app.module.ts中导入类
  import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
  .//...
  @NgModule({
  imports: [
  NgMultiSelectDropDownModule.forRoot()
  // ...
  ]
  // ...
  })
  export class AppModule {}
  4 在需要使用的界面使用

ts

  dropdownList;
  selectedItems = [];
  constructor() { }
  ngOnInit() {
    this.dropdownList = [
      { id: 1, text: '百度' },
      { id: 2, text: '谷歌' },
      { id: 3, text: 'UC浏览器' },
      { id: 4, text: '360浏览器' },
      { id: 5, text: 'safari' }
    ];
  }

html

  <ng-multiselect-dropdown [placeholder]="'请选择浏览器'" [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings"
    (onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)">
  </ng-multiselect-dropdown>

4 修改默认配置
在node_modules中找到多选插件

image.png

找到下面的配置，将其修改

修改前

   this.defaultSettings = {
                singleSelection: false,//单选
                idField: 'id',//value
                textField: 'text',//key
                enableCheckAll: true,
                selectAllText: 'Select All',//全选
                unSelectAllText: 'UnSelect All',//取消全选
                allowSearchFilter: false,
                limitSelection: -1,
                clearSearchFilter: true,
                maxHeight: 197,
                itemsShowLimit: 999999999999,//在输入框显示选择的个数
                searchPlaceholderText: 'Search',
                noDataAvailablePlaceholderText: 'No data available',//无数据时显示的默认
                closeDropDownOnSelection: false,
                showSelectedItemsAtTop: false,
                defaultOpen: false //初始化默认打开下拉菜单
            };

修改后

 this.defaultSettings = {
            singleSelection: false,
            idField: 'id',
            textField: 'text',
            enableCheckAll: true,
            selectAllText: '全选',
            unSelectAllText: '取消全选',
            allowSearchFilter: false,
            limitSelection: -1,
            clearSearchFilter: true,
            maxHeight: 197,
            itemsShowLimit: 1,
            searchPlaceholderText: 'Search',
            noDataAvailablePlaceholderText: '无数据',
            closeDropDownOnSelection: false,
            showSelectedItemsAtTop: false,
            defaultOpen: false
        };

效果如下

image.png image.png

PS：不建议修改node_modules中的配置，这样不适合多人开发，还是参考官方文档修改配置，