Угловой генератор событий

Код ниже применяет фильтры для страницы, но фильтры начинают работать только тогда, когда я нажимаю, чтобы закрыть панель фильтров. Как мне применить их на лету, не закрывая саму панель?

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>

Вы излучаете только тогда, когда панель скрыта, поэтому неясно, почему такое поведение является неожиданным.

jonrsharpe 11.03.2019 21:36

Да, я понимаю это. Но как изменить код, чтобы применять фильтры на лету, не закрывая саму панель? Как я могу сгенерировать и сразу же получить результат, когда я нажимаю спецификации фильтра?

Слава Мельников 11.03.2019 21:41

Вы должны следить за изменениями в вашей ngModel и испускать эти изменения

webdevius 11.03.2019 21:43

Еще лучше, поскольку вы, похоже, используете компоненты PrimeNG. Поднимите событие onChange, предоставленное компонентом множественного выбора, через свой собственный вывод.

webdevius 11.03.2019 21:47

При чем тут ты пытался и в чем проблема с ним?

jonrsharpe 11.03.2019 21:47
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
5
655
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Решено! Я добавил onChange, как предложил @webdevius:

В HTML моей панели добавлен по изменению

<div class = "filter-multiselect">
  <p-multiSelect [options] = "items"
                 [(ngModel)] = "itemsSelected"
                 styleClass = "multiSelect"
                 [defaultLabel] = "labelComponent"
                 (onPanelShow) = "handlePanelShow()"
                 (onPanelHide) = "handlePanelHide()"
                 (onChange) = "filtersApply()"
                 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>

и излучать при выборе фильтра (теперь не зависит открыта панель или нет)

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;
  }

  filtersApply() {
    this.closeMultiselectEventHandler.emit(this.itemsSelected);
  }

  handleClickMultiSelect(event) {

  }
}

Другие вопросы по теме