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

Question

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

Answer 1

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

脚步：

#dropdownRef在模板中添加

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

在 TS 文件中执行以下操作：

import { AngularMultiSelect } from 'angular2-multiselect-dropdown';

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

onItemSelect(item: any) {

   console.log(item);

   this.dropdownRef.closeDropdown()

}

Answer 2

使用@ViewChild访问到这样的下拉列表：

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

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

this.dDown.closeDropdown()