事件发射器角度

Question

下面的代码为页面应用了过滤器，但是只有当我单击以关闭过滤器的面板时，过滤器才开始起作用。如何在不关闭面板本身的情况下即时应用它们？

import { Component, OnInit, ViewEncapsulation, Input, ElementRef, 
EventEmitter, Output } from '@angular/core';
import { MultiselectBaseModel } from '../app-models/MultiselectBaseModel';

@Component({
  selector: 'app-filter-multiselect',
  templateUrl: './filter-multiselect.component.html',
  styleUrls: ['./filter-multiselect.component.less'],
  encapsulation: ViewEncapsulation.None
})
export class FilterMultiselectComponent implements OnInit {
  @Input() labelComponent: string;
  @Input() items: MultiselectBaseModel[];
  @Input() itemsSelected: MultiselectBaseModel[];
  @Output() closeMultiselectEventHandler: EventEmitter<any> = new 
EventEmitter();

  isOpen = false;

  constructor(public el: ElementRef) { }

  ngOnInit() { }

  handlePanelShow() {
    this.isOpen = true;
  }

  handlePanelHide() {
    this.isOpen = false;
    this.closeMultiselectEventHandler.emit(this.itemsSelected);
  }

  handleClickMultiSelect(event) {

  }
}

我的HTML在这里：

<div class="filter-multiselect">
  <p-multiSelect [options]="items"
             [(ngModel)]="itemsSelected"                 
             styleClass="multiSelect"
             [defaultLabel]="labelComponent"
             (onPanelShow)="handlePanelShow()"
             (onPanelHide)="handlePanelHide()"
             panelStyleClass="panelStyleClassCustom"
             [ngClass]="isOpen ? 'multi-select-open' : '' "
             [maxSelectedLabels]="0">
    <ng-template let-element let-i="index" pTemplate="item">
      <div class="ui-multiselect-item-text">{{element.label}}</div>
    </ng-template>
  </p-multiSelect>
</div>