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

Question

我对angular不熟悉，我试图访问angular2-multiselect-dropdown进行单选并显示所选数据。在这里，我希望下拉菜单在选择数据时单击以关闭/隐藏。请检查https://stackblitz.com/edit/r7-angular2-multislect

谢谢

Answer 1

这个想法是使用AngularMultiSelect在组件中创建Viewchild类的实例，然后调用它的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

Answer 2

使用@ViewChild来访问下拉菜单，如下所示：

@ViewChild(AngularMultiSelect, {static: false}) dDown: AngularMultiSelect;  

现在您可以随时关闭下拉菜单：

this.dDown.closeDropdown()