使用管道过滤器在 Ionic 中的搜索栏答案

【问题标题】：Search bar in Ionic using pipe filter使用管道过滤器在 Ionic 中的搜索栏
【发布时间】：2021-12-01 22:40:47
【问题描述】：

糟糕，伙计们，我有以下问题，我制作了这个管道过滤器来过滤这些信息，但是我需要过滤另外 2 条信息，但我不知道如何在这个管道中执行此操作。我将在下面留下我制作的管道示例

/*** PIPE ***/

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(nomes: any, search: []): any {

    if (search === undefined) { return nomes }
    return nomes.filter(function(nome){
      Here, I needed to filter, nome?.city, nome?.age
      return nome?.titulo?.includes(search)
    })
  }

}

/*** HTML ***/

<ion-searchbar [(ngModel)]="search" name="search"></ion-searchbar>

【问题讨论】：

标签： javascript angular typescript ionic-framework

【解决方案1】：

在 HTML 页面中添加此代码

<ion-searchbar color="light" class="ion-no-padding" [(ngModel)]="searchData" mode="ios"
        [placeholder]="'Search '+pageName">
      </ion-searchbar>

<ion-row *ngFor="let item of checkContent | filterData : ['city','age'] : searchData">
</ion-row>

在过滤管道中添加此代码

transform(items: any[], field: any[], value: string): any[] {
        if (!items || !value || !field) {
          return items;
        }
    
        let lowSearch = value.toLowerCase();
        return items.filter((item) => {
          return field.some(key =>
            String(item[key]).toLowerCase().includes(lowSearch)
          );
        });
      }

【讨论】：