angular - 带有多选选项的 Angular Typeahead

Question

想要通过下拉列表的多选实现 Angular 预输入。

现在，我正在使用

https://ng-bootstrap.github.io/#/components/typeahead/examples

标签： angulartypeahead

Answer 1

1）安装包

npm install ng-multiselect-dropdown

2）添加你的模块

import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown'; //eg app.module.ts

3）添加你的组件和html html

<ng-multiselect-dropdown
  [placeholder]="'custom placeholder'"
  [data]="dropdownList"
  [(ngModel)]="selectedItems"
  [settings]="dropdownSettings"
  (onSelect)="onItemSelect($event)"
  (onSelectAll)="onSelectAll($event)"
>
</ng-multiselect-dropdown>

ts：

dropdownList = [];
  selectedItems = [];
  dropdownSettings = {};
  ngOnInit() {
    this.dropdownList = [
      { item_id: 1, item_text: 'Mumbai' },
      { item_id: 2, item_text: 'Bangaluru' },
      { item_id: 3, item_text: 'Pune' },
      { item_id: 4, item_text: 'Navsari' },
      { item_id: 5, item_text: 'New Delhi' }
    ];
    this.selectedItems = [
      { item_id: 3, item_text: 'Pune' },
      { item_id: 4, item_text: 'Navsari' }
    ];
    this.dropdownSettings = {
      singleSelection: false,
      idField: 'item_id',
      textField: 'item_text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 3,
      allowSearchFilter: true
    };
  }
  onItemSelect(item: any) {
    console.log(item);
  }
  onSelectAll(items: any) {
    console.log(items);
  }

参考。：https ://github.com/nileshpatel17/ng-multiselect-dropdown