自定义过滤器区分大小写 [英] Custom filter case sensitive

问题描述

我创建了自定义管道以从数据库中过滤数据

I've created custom pipe to filter my data from database

有烟斗

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

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

  transform(aliases: any, term: any): any {
    // check if search term is undefined
    if (term === undefined) return aliases;
    // return updated array
    return aliases.filter(function(alias){
      return alias.local_part.includes(term) || alias.domain.includes(term);
    });
  }

}

这是我的搜索输入

<form id="filter">
            <div class="input-group custom-search-form">
                <input type="text" placeholder="Search" class="form-control" [(ngModel)]="term" name="filter">
                <span class="input-group-btn">
          <button class="btn btn-primary" type="button">
          <i class="fa fa-search"></i>
                </button>
                </span>
            </div>
        </form>

它工作正常，但是我的数据库记录中有aaa，Abb，AbbB，cCc.

it works fine but I have in my database records like aaa,Abb,AbbB,cCc.

当我在搜索输入中键入内容时，它仅返回小写或大写的元素.

And when I am typing something into search input it return only elements where is lower cases or upper.

例如:搜索-> aaa返回aaa，但不返回AaA和Aaa

For example: search -> aaa return aaa but not AaA and Aaa

我应该如何改变它以实现它?

How should I change it to achieve it?

推荐答案

按如下所示更改管道

private transform(aliases: any, term: any): any {
        let filter;
        let newValue;
        // check if search term is undefined
        if (term === undefined) {
            return aliases;
        } else if (term) {
            filter = term.toLocaleLowerCase();
        }

        if (filter && aliases) {
            newValue = aliases.filter((alias) => alias.local_part.toLocaleLowerCase().indexOf(filter) !== -1 || alias.domain.toLocaleLowerCase().indexOf(filter) !== -1);
        } else {
            newValue = aliases;
        }
        // return updated array
        return newValue;
    }

这篇关于自定义过滤器区分大小写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！