如何让我的 'angular search list pipe' 不区分大小写？

Question

我有工作列表和搜索框。在搜索框中，用户输入职位名称来搜索职位。我制作了一个 angular 管道来根据用户在搜索框中键入的字母表搜索作业，这意味着作业列表正在更新，只有那些用户键入字母表的项目它工作完美，但区分大小写，我想让它区分大小写。我已经使大小写敏感 "Contains" 基于 angular pipe.I 试图使搜索关键字基于小写但没有用。

    **TS.file**
    @Pipe({ name: 'filterByName' })
    export class filterNames implements PipeTransform {
      transform(listOfNames: string[], nameToFilter: string, ): string[] {
        var upperLetter=nameToFilter.toUpperCase();
        var smallLetter=nameToFilter.toLowerCase();
        if (!listOfNames) return null;
        if (!nameToFilter) return listOfNames;
        return listOfNames.filter(n =>
   ((n.indexOf(smallLetter) >= 0)||(n.indexOf(upperLetter) >= 0)) 
        );
      }
    }

    **Html file:**
    <mat-form-field class="example-full-width">
      <input [(ngModel)]="filterName" matInput placeholder="Find jobs">
    <mat-form-field

    <mat-nav-list *ngIf ="showlist"  #jobs>
      <mat-list-item *ngFor="let response of JOBS| filterByName:filterName">
        {{response}} 
      </mat-list-item>
    </mat-nav-list>

我希望如果用户在搜索框中键入 "A"，列表应该更新为同时包含列表项 'A' 和 'a'。现在在这种情况下，只有 "A" 项正在更新。如果还需要输入，请告诉我。提前致谢。

Answer 1

这可以通过强制 listOfNames（在过滤器中）和 nameToFilter 中的名称都为大写来完成。

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

@Pipe({
  name: 'filterByName'
})
export class FilterNamesPipe implements PipeTransform {

  transform(listOfNames: string[], nameToFilter: string=''): string[] {
        var upperLetter = nameToFilter.toUpperCase();
        if (!listOfNames) return null;
        // console.log('listOfNames', listOfNames, 'nameToFilter', nameToFilter, 'upperLetter', upperLetter );
        if (!nameToFilter || nameToFilter === '') return listOfNames;
        return listOfNames.filter(name => 
          name.toUpperCase().startsWith(upperLetter)
        )
  }

}

Stackblitz 示例 - https://stackblitz.com/edit/angular-so-56307438

如何让我的 'angular search list pipe' 不区分大小写？

How to make my 'angular search list pipe' Case-Insensitive?

pipe

filter

case-insensitive

angular7