如何使用管道过滤第三方组件内部列出的项目

Question

我在我的角度2组件中使用第三方树视图控件angular2-tree-component。我使用它作为如下：

<tree-root [nodes]="nodes"></tree-root> 

这里nodes是TrItem类看起来像的对象的数组：

export class TrItem{ 
    itemId: number, 
    name: string, 
    itemDesc: string, 
    blahBlah: string 
} 

name属性用于显示树的节点。

我想，我们下面给出的输入类型要使用的将过滤器内部tree-root组件显示的节点的输入文本元素：

<input type="text" [(ngModel)] = "nodeFilter"/> 

请让我知道如何做到这一点。

Answer 1

创建新的管道：

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

@Pipe({ 
    name: 'filterByName' 
}) 

export class FilterByNamePipe implements PipeTransform { 

    transform(value: any[], name:string): any[] { 
    let result: any = []; 
    if (value && name) { 
     value.forEach((item) => { 
     if(item.name.toLowerCase() === name.toLowerCase()) { 
      result.push(item); 
     } 
     }); 
    } 
    else if(value) { 
     result = value; 
    } 

    return result; 
    } 
} 

包括它，你的应用模块：

import { FilterByNamePipe } from "PATH_TO_YOUR_PIPE_CLASS_FILE"; 

不要忘了@NgModule(...)的declarations列表：

declarations: [ 
    //... 
    FilterByNamePipe, 
    //... 
] 

使用在你的html中：

<tree-root [nodes]="nodes | filterByName : nodeFilter"></tree-root> 

此管道将严格检查与他们的name属性的确切值的项目。如果您要过滤其包含内他们的名字滤波值的项目，那么你必须改变这种状况：

item.name.toLowerCase() === name.toLowerCase() 

别的东西，取决于您的要求...也许.indexOf()