在 angular 中使用自定义管道实现搜索

Question

我尝试在 angular 6 中使用搜索框来过滤我的广告系列列表来实现我自己的管道。奇怪的是，我无法过滤广告系列列表。我在下面发布我的代码。

这是我的过滤器的样子：

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

@Pipe({
  name: 'nameFilter'
})

export class NameFilterPipe implements PipeTransform {
  transform(values: any[], key: string, value: string): any[] {
    debugger;

    if (!values) {
      return [];
    }
    if (!value) {
      return values;
    }
    return values.filter(val => val.CampaignName === value);
  }
}

<input [(ngModel)]="searchText" placeholder="search here">

<tr *ngFor="let campaign of campaigns?.result | nameFilter : searchText">

  <td style="max-width:280px">
  
    <p>{{campaign.CampaignName}}</p>
    
    <small><span class="cursor" (click)="filterByOwnr(campaign.DepartmentName)" > {{ campaign.DepartmentName }} &nbsp; &nbsp; </span></small>
    
  </td>

我调试了我的管道，它是这样的：

我能够获取我的管道值，但无法在我的 html 页面中应用过滤器。

P.S：尝试@Arcteezy 后，出现以下错误。

console.log（字段） 的控制台日志：

Answer 1

试试这个，

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

    @Pipe({
        name: 'filter'
    })

    @Injectable()
    export class FilterPipe implements PipeTransform {
        transform(items: any[], field: string, value: string): any[] {

            console.log(value);
            if (!items) {
                return [];
            }
            if (!field || !value) {
                return items;
            }

            return items.filter(singleItem => singleItem[field].toLowerCase().includes(value.toLowerCase()));
        }
    }

在你的HTML,

    *ngFor = "let... | filter : '<search_field>' : searchText"

Answer 2

管道文件

filteredItems: Array<any>;
// Items & searchText is the input of the pipe;
// @param: Items contains current object in the ngFor loop.
// @param: searchText is the text that is need to be searched string.


transform(items: any[], searchText: string): any[] {

    if (!items) {
        return [];
    }
    if (!searchText) {
        return items;
    }
    searchText = searchText.toLowerCase();
    this.filteredItems =  items.filter( function (records) {
        let searchMatched;
        for ( const keys in records ) {
            if ( typeof (records[keys]) === 'string') {
                searchMatched = records[keys].toLowerCase().includes(searchText);
                if (searchMatched) {
                    return searchMatched;
                }
            }
        }
    });

    if (this.filteredItems.length < Constants.ONE_COUNT) {
        return -1;
    } else {
        return this.filteredItems;
    }
}

返回最后第二行的-1是为了处理找到的零结果

HTML 文件

*ngFor="data| searchFilter: inputText;

上面的代码会进行不区分大小写的搜索，如果你想实现区分大小写的搜索，请去掉搜索文本到小写的转换

Answer 3

在你的管道中.ts

 @Pipe({
  name: 'nameFilter'
})

export class NameFilterPipe implements PipeTransform {
  transform(values: any, key?: string): any[] {
    debugger;
    if (!key) return values;
    key = (key.trim()).toLowerCase();
    return values.filter(val => (val.CampaignName).toLowerCase() === key);
  }
}

在你的 .html

<tr *ngFor="let campaign of campaigns | nameFilter : searchText">

这里是 link stackblitz

的工作示例

在 angular 中使用自定义管道实现搜索

Implementing search using custom pipe in angular

angular-pipe

angular

angular6