如何在PrimeNG MultiSelect的onPanelHide事件中清除过滤文本？

嘿，这个需求我熟！要让PrimeNG的MultiSelect在面板收起时自动清空过滤框里的文本，其实几步就能搞定，我给你拆解下具体实现：

• 第一步：模板层绑定事件与组件实例
  在你的MultiSelect标签上，先加个模板变量（比如#multiSelect），然后绑定onPanelHide事件，把组件实例传进事件方法里：

  <p-multiSelect #multiSelect 
    [options]="yourOptionsList" 
    [(ngModel)]="selectedItems"
    filter="true"
    (onPanelHide)="clearFilterInput(multiSelect)">
  </p-multiSelect>
  

  别忘了开启filter="true"，毕竟只有开启过滤功能才会显示这个输入框嘛。

• 第二步：组件类实现清空逻辑
  接下来在你的Angular组件类里，引入MultiSelect组件，然后写一个clearFilterInput方法，直接操作组件的过滤输入框和过滤状态：

  import { Component } from '@angular/core';
  import { MultiSelect } from 'primeng/multiselect';
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html'
  })
  export class YourComponent {
    yourOptionsList = [/* 你的选项数据 */];
    selectedItems: any[] = [];
  
    clearFilterInput(multiSelect: MultiSelect) {
      // 清空过滤输入框的显示文本
      multiSelect.filterInput.nativeElement.value = '';
      // 调用组件的filter方法重置过滤，让所有选项重新显示
      multiSelect.filter('');
    }
  }
  

• 可选：用@ViewChild替代模板传参
  如果你觉得模板里传参有点麻烦，也可以用@ViewChild来获取MultiSelect实例，这样事件方法里就不用传参了：

  import { Component, ViewChild } from '@angular/core';
  import { MultiSelect } from 'primeng/multiselect';
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html'
  })
  export class YourComponent {
    yourOptionsList = [/* 你的选项数据 */];
    selectedItems: any[] = [];
    @ViewChild('multiSelect') private multiSelectInstance!: MultiSelect;
  
    clearFilterInput() {
      this.multiSelectInstance.filterInput.nativeElement.value = '';
      this.multiSelectInstance.filter('');
    }
  }
  

  对应的模板事件绑定改成(onPanelHide)="clearFilterInput()"就可以了。

这样操作后，每次MultiSelect的面板收起时，过滤框里的文本就会被自动清空，同时所有选项也会恢复显示，体验很顺畅哦！

内容的提问来源于stack exchange，提问作者Anish Vincent