Question

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

这是我的过滤器的外观：

app.UseMvc(routes =>
{
    routes.MapRoute(
    name: "areaRoute",
    template: "{area:exists}/{controller=Home}/{action=Index}/{id?}");

    routes.MapRoute(
    name: "default",
    template: "{controller=Home}/{action=Index}/{id?}");
});

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

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

我能够将值添加到管道中，但无法在html页面中应用过滤器。

PS ：尝试@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">

这是stackblitz

的工作示例链接

使用自定义管道以角度实现搜索

3 个答案: