Question

我正在使用Angular和Ionic构建应用程序。我的问题是我有显示的人员列表。当我单击过滤器图标时，它会打开一个离子弹出窗口，为我提供过滤器选项（例如最小/最大年龄）。在输入年龄值时，我希望搜索栏上有一个过滤器，以动态显示该年龄范围内的人。截至目前，我正在尝试在Popover组件上使用@Output和Event Emitter。我得到的值是正确的，但无法在搜索组件中显示这些值。基本上，我只需要访问更新的eeSortOptions对象，即可运行年龄过滤器。我已经为此工作了一段时间，并且是角度/离子传感器的新手，所以我们将不胜感激。

我的Popover组件

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模板

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

将数据从离子Popover传递到角度过滤器

0 个答案: