Передача данных из Ioni c Popover в Angular Filter - PullRequest
0 голосов
/ 27 февраля 2020

Я работаю над созданием приложения с 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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...