Я работаю над созданием приложения с Angular и Ioni c. Моя проблема в том, что у меня отображается список людей. Когда я нажимаю на свой значок фильтра, он открывает всплывающее окно Ioni c, которое дает мне параметры фильтра (например, минимальный / максимальный возраст). По мере ввода значений возраста, я хочу фильтр на панели поиска, который будет динамически показывать людей в этом возрасте. На данный момент на моем компоненте popover я пытаюсь использовать @Output и Event Emitter. Полученные значения верны, но я не могу отобразить эти значения в компоненте поиска. По сути, мне просто нужен доступ к обновленному объекту eeSortOptions, чтобы я мог запустить фильтр возраста. Я работал над этим некоторое время, и я новичок в angular / ioni c, поэтому любая помощь приветствуется.
My Popover Component
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { PopoverController } from '@ionic/angular';
@Component({
selector: 'popover',
templateUrl: './popover.component.html',
styleUrls: ['./popover.component.scss'],
})
export class PopoverComponent implements OnInit {
eeSortOptions = {
min_age: 0,
max_age: 100,
};
@Output() filterChanged: EventEmitter<any> = new EventEmitter();
valueChanged() {
console.log(this.eeSortOptions);
this.filterChanged.emit(this.eeSortOptions);
}
Popover Template
<ion-row>
<ion-col size="8">
<span class="input-label thinner">Min Age:</span>
</ion-col>
<ion-col size="4">
<ion-input type="number" [(ngModel)]="eeSortOptions.min_age" (keyup)="valueChanged()">
</ion-input>
</ion-col>
</ion-row>
Персональный шаблон
<ion-buttons slot="end" class="filter" (click)="presentPopover()" (filterChanged)="getOutputVal($event)">
<ion-icon name="funnel"></ion-icon><p>Filter</p>
</ion-buttons>
<popover (filterChanged)="getOutputVal($event)"></popover>`
<ion-searchbar showCancelButton="focus" cancelButtonText="Cancel" [(ngModel)]="searchText" animated ></ion-searchbar>
<ion-item *ngFor="let person of globalPeople| filter:searchText" lines="full">
Персональный компонент
async presentPopover(ev: any) {
const popover = await this.popoverController.create({
component: PopoverComponent,
event: ev,
translucent: true
});
return await popover.present();
}
getOutputVal(val) {
console.log('test from parent!');
this.eeSortOptions = val;
console.log(this.eeSortOptions);
}
Это то, что я хотел бы, чтобы мой фильтр возраста возвратил:
return (employee.age >= this.eeSortOptions.min_age && employee.age <= this.eeSortOptions.max_age);