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

Question

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

Answer 1

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

your.component.html

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

你的组件.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 提供直接方法来实现所需结果，您可能不需要使用此解决方法。