javascript - 如何在单击下拉列表中的数据时关闭 angular2-multiselect-dropdown

Question

我是 Angular 的新手，我试图访问 angular2-multiselect-dropdown 进行单选并显示所选数据。在这里，我希望下拉菜单在单击选择数据时关闭/隐藏。请查看https://stackblitz.com/edit/r7-angular2-multislect

谢谢

Answer 1

想法是使用 Viewchild 在您的组件中创建 AngularMultiSelect 类的实例，然后调用它的 closeDropdown() 方法。

步骤:

1. 在模板中添加#dropdownRef

   <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings" (onSelect)="onItemSelect($event)" #dropdownRef> </angular2-multiselect>
   

2. 在您的 TS 文件中执行以下操作:

   import { AngularMultiSelect } from 'angular2-multiselect-dropdown';
   
   @ViewChild('dropdownRef',{static:false}) dropdownRef: AngularMultiSelect;
   
   onItemSelect(item: any) {
      console.log(item);
      this.dropdownRef.closeDropdown()
   }
   

Working Demo