Код ниже применяет фильтры для страницы, но фильтры начинают работать только тогда, когда я нажимаю, чтобы закрыть панель фильтров. Как мне применить их на лету, не закрывая саму панель?
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>
Да, я понимаю это. Но как изменить код, чтобы применять фильтры на лету, не закрывая саму панель? Как я могу сгенерировать и сразу же получить результат, когда я нажимаю спецификации фильтра?
Вы должны следить за изменениями в вашей ngModel и испускать эти изменения
Еще лучше, поскольку вы, похоже, используете компоненты PrimeNG. Поднимите событие onChange, предоставленное компонентом множественного выбора, через свой собственный вывод.
При чем тут ты пытался и в чем проблема с ним?





Решено! Я добавил 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) {
}
}
Вы излучаете только тогда, когда панель скрыта, поэтому неясно, почему такое поведение является неожиданным.