Angular 15 从 json 数组中过滤多个值，用逗号分隔

Question

我在我的项目中使用 Angular 15。 我能够从搜索框中过滤单个值，但我想要实现的是从搜索框中过滤多个值，用逗号分隔。 任何帮助，将不胜感激。

FilterPipe
import { Pipe, PipeTransform } from '@angular/core';
import { FilterData} from './data';

@Pipe({ name: 'datum' })
export class filterPipe implements PipeTransform {
transform(values: FilterData[], filter: any): FilterData[] {
if (!filter || filter.length === 0) {
  return values;
}

if (values.length === 0) {
  return values;
}

// @ts-ignore
return values.filter((value: Yafo) => {

  const matchFilter = [];
  const filterArray = filter.split(';');
  const columns = (<any>Object).values(values);
  

  // Main
  filterArray.forEach((filter:any) => {
    const customFilter: any = [];
    columns.forEach((column:any) =>
      customFilter.push(column.toLowerCase().includes(filter))
    );
    console.log(customFilter);
    matchFilter.push(customFilter.some(Boolean)); // OR
  });



  const nameFound =
    value.Firma.trim().toLowerCase().indexOf(filter.toLowerCase().split(',')) !== -1;
  const emailFound =
    value.Email.trim().toLowerCase().indexOf(filter.toLowerCase().split(',')) !== -1;
  const plzFound =
    value.Plz.trim().toLowerCase().indexOf(filter.toLowerCase().split(',')) !== -1;
  const datumFound =
    value.RegistrationDatum.trim().toLowerCase().indexOf(filter.toLowerCase().split(',')) !== -1;

  if (nameFound || emailFound || plzFound || datumFound) {
    return value;
  }
});
}
}

Answer 1

我希望，我对你的理解是正确的，你需要拆分过滤值并将值添加到 customFilter，就像这样

    this.dataSourceCommaSepareted.filterPredicate = (
          data: UserData,
          filters: string
        ) => {
          const matchFilter = [];
          const filterArray = filters.split(';');
          const columns = (<any>Object).values(data);
          // OR be more specific [data.name, data.race, data.color];
    
          // Main
          filterArray.forEach((filter) => {
            const customFilter = [];
            columns.forEach((column) =>
// Here we split the filter value
              filter
                .split(',')
                .forEach((valueOfFilter) =>
                  customFilter.push(column.toLowerCase().includes(valueOfFilter))
                )
            );
            matchFilter.push(customFilter.some(Boolean)); // OR
          });
          return matchFilter.every(Boolean); // AND
        };

这是我在 stackblitz 上的例子https://stackblitz.com/edit/sb-issue-multiple-filter-ygaowm?file=app/app.component.html

Answer 2

这是我做的一个解决方案。 这是工作。 感谢您的支持

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

@Pipe({ name: 'filter' })
export class filterPipe implements PipeTransform {
  transform(items: any[], filterValues: string): any[]{
  console.log('Filter pipe called');

if(!items || !filterValues){
  return items;
}
const keywords = filterValues.split(',');
return items.filter(item => {
  for (const keyword of keywords) {
    if (item.Firma.toLowerCase().indexOf(keyword.toLowerCase().trim()) !== -1 ||
      item.Plz.toLowerCase().indexOf(keyword.toLowerCase().trim()) !== -1) {
      return true;
    }
    }
   return false;
   })
 }
}