如何使我的“角度搜索列表管道”不区分大小写？

Question

我有一个工作列表和搜索框。在搜索框中，用户输入职位名称来搜索职位。我制作了一个角管来根据用户在搜索框中键入的字母来搜索工作，这意味着工作列表正在更新，只有那些由用户键入字母的项目 它工作得很好，但它区分大小写，我想让它区分大小写。 我已经制作了区分大小写的基于“包含”的角管道。我尝试在小写的基础上制作搜索关键字，但没有奏效。

    **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