在 primeng 多选对话框关闭时触发事件

Question

我正在尝试使用 primeng 多选组件。我想在用户关闭多选下拉列表后立即获取所有选定的值。有办法做到吗？我知道我们有 onChange() 事件，但每次用户从列表中选择或取消选择一个值时它都会触发。我想在用户完成选择值时触发它。

Answer 1

由于 primeng 不提供任何 api 来直接实现您需要的功能，这是我能够做到的一种方法。

your.component.html

<p-multiSelect #ms [options]="cars" [(ngModel)]="selectedCars"></p-multiSelect>

你的.component.ts

import { Renderer} from '@angular/core';
import {MultiSelect} from 'primeng/primeng';

@ViewChild('ms') multiselect: MultiSelect;

constructor(private renderer  :Renderer) {}

ngOnInit(){
     this.renderer.listenGlobal('document', 'click', ()=> {
        if (!this.multiselect.selfClick && !this.multiselect.panelClick && this.multiselect.overlayVisible) {
          console.log('multiselect will hide'); // write code here to execute when multiselect overlay get dismissed/hidden
          // this.selectedCars will have all the selected values.
        }
    });
}

当用户单击多选本身以外的任何位置时，Primeng 使用相同的逻辑来消除多选叠加。 如果将来 primeng 提供直接方法来实现所需结果，您可能不需要使用此解决方案。

Answer 2

我已经将此作为评论，但为了帮助任何直接找到答案的人： Primeng 提供了一个

onPanelHide()

方法来帮助响应 p-multiselect 下拉面板的关闭。

我还继续确认此方法存在于所有记录版本v7到最新的v17中。

使用示例

在您的 .component.html 模板中：

        <p-multiSelect
          [options]="tableColumns"
          [(ngModel)]="selectedColumns"
          placeholder="Choose Columns"
          (onPanelHide)="onTableConfigPanelHide()"
        ></p-multiSelect>

在对应的.component.ts文件中

  onTableConfigPanelHide() {
    // Do whatever
  }