Question

我正在构建一个angular4应用程序。我写过自定义过滤管。我只能在一个组件中使用它，以便在每个ng中我的属性名称例如不同 1）在学生组件中，我使用了过滤管道：

<ul>
   <li *ngFor="let studentReport of studentReports | filter: term">
   </li>
</ul>

2）在统计组件中我有这个，我想在这里使用我的过滤管：

<ul>
   <li *ngFor="let statReport of statReports">
   </li>
</ul>

我的自定义管道就像这样

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
   name: 'filter'
})
export class FilterPipe implements PipeTransform {

   transform(studentReports: any, term: any): any {

       //check search term if undefined
       if(term == undefined) return studentReports;
       //return updated array

       return studentReports.filter(function(studentReport) {
           return studentReport.name.toLowerCase().includes(term.toLowerCase())
       });
   }

}

我必须将值更改为可以在每个组件中使用它的东西..

如果有人帮助我，我将不胜感激。

Answer 1

无论是否推荐，以下是您可以使用的通用管道：

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

@Pipe({
  name: 'filterBy'
})

export class FilterByPipe implements PipeTransform {

  transform(value: any, args: string[]): any[] {

    if (!args[0]) {
      return value;
    }
    else if (value) {

      return value.filter(item => {

        // TODO: Allow args[1] to be null, therefore searching in all object properties
        if ((typeof item[args[1]] === 'string' || item[args[1]] instanceof String) && (item[args[1]].toLowerCase().indexOf(args[0].toLowerCase()) !== -1)) {
          return true;
        }
      });
    }
  }
}

每个组件的过滤管道

1 个答案: