使用 Angular 中的管道过滤某些数据时出现问题

Question

我有一个下拉框，我在其中添加了一个搜索框，我想根据文本框条目过滤选项。在我的例子中，我还说如果 searchText 为 null 或空 return 所有数据都可以正常工作。但是如果我提交一个过滤器，我会得到这个错误。

core.js:6142 ERROR TypeError: Cannot read properties of undefined (reading 'toLowerCase') at option-filter.pipe.ts:13:47 at Array.filter () at OptionFilterPipe.transform (option-filter.pipe.ts:13:16)

这是我的模板代码

 <igx-drop-down-item *ngFor="let option of options |  optionFilter : optionsearch.value : 'name'" [value]="option">
    {{ option.name }}
    </igx-drop-down-item>

这是我的管道代码

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

@Pipe({ name: 'optionFilter' })
export class OptionFilterPipe implements PipeTransform {
 
  public transform(data: any[], searchText: any, fieldName: string): any {
  if (searchText == null || data == null || searchText == '' ) {
    return data;
  }
  console.log(data)
  console.log('Serch Text : ' + searchText)
  console.log('FieldName : ' + fieldName)
   return data.filter(item => item[fieldName].toLowerCase().indexOf(searchText.toLowerCase()) !== -1);
  }
}

Answer 1

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


type DynamicKey = keyof typeof ServerDropdownOption;

@Pipe({ name: 'optionFilter' })
export class OptionFilterPipe implements PipeTransform {
 
  public transform( data: ServerDropdownOption[], searchText: string, fieldName: string ): ServerDropdownOption[] {
  if (searchText == null || data == null || searchText == '' ) {
    return data;
  }
  const fieldRef = fieldName as DynamicKey;
  return data.filter(item => item[fieldRef].toLowerCase().indexOf(searchText.toLowerCase()) !== -1);
  }
}

应该可以，没测试过

PS: 从适当的地方导入 ServerDropdownOption

Answer 2

我想在我的情况下，它与调用时间有关并且没有数据，因为它是异步调用。 Fieldname 不是问题，我无法消除，因为它需要告诉函数在对象中过滤哪个字段。

下面是解决问题的代码

return data.filter(item => item[fieldName]?.toString()?.toLowerCase().indexOf(searchText?.toString()?.toLowerCase()) !== -1);

使用 Angular 中的管道过滤某些数据时出现问题

Problem using a Pipe in Angular to filter some data

typescript

angular