html - "onDropDownClose"事件一直被触发,即使我点击 ng-multiselect-dropdown 中下拉菜单以外的任何其他地方

标签 html angular angular-material dropdown multi-select

我正在使用 ng-multiselect-dropdown,我必须根据所选列表加载数据。 因此,我使用“onDropDownClose”事件来获取所有选定的值并根据选定的多个值加载其他数据。

   <ng-multiselect-dropdown
   [placeholder]="'Select Project'"
   [settings]="dropdownSettings"
   [data]="projects"
   [required]='requiredField' 
   [(ngModel)]="selectedItems"
   name="projectName"
   [ngClass]='setClass()'
  #projectName="ngModel"
  (onSelect)="onItemSelect($event)"
  (onSelectAll)="onSelectAll($event)" 
  (onDropDownClose)="saveFunction($event)">

但关闭事件一直在触发,即使我总是在下拉菜单外单击。 有什么替代方法吗?请帮忙。

最佳答案

这应该在他们结束时修复,但在那之前你可以使用这个技巧: 除了 (onDropDownClose),还监听 ng-multiselect-dropdown

上的点击事件
 // this act as a differentiator between other calls(bug) and an intended call
 (click)="dropDownSelect = true".

在您的组件中,声明您的变量并像这样使用它:

dropDownSelect = false;

saveFunction($event) {
 if (this.dropDownSelect) {
        // close the opening to subsequent actions 
        this.dropDownSelect = false;
        // Perform action;
 };
}

关于html - "onDropDownClose"事件一直被触发,即使我点击 ng-multiselect-dropdown 中下拉菜单以外的任何其他地方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64729826/

相关文章:

php - 带有 AND 运算符的正则表达式 mysql

javascript - JQuery attr不设置最大值但设置html输入标签的最小值

javascript - 为什么要从标签名称中删除空格?

angular - 如何绑定(bind)到 angular2 中的 data-* 属性?

Angular 6 在路线更改之间显示微调器

angular - 选择动画不适用于 Angular (7) Material 选项卡

javascript - Laravel 如何通过单击按钮在 <li> 中获取值并将值发送到 Controller

angular - 无法成功编译我的 Angular 应用程序

Angular Material 排版覆盖 - 将 2 个配置传递给 mat-core?

javascript - angular material 两个复选框,一次只能勾选一个