如何使用管道過濾第三方組件內部列出的項目

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()