Question

我在angular 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";

不要忘记declarations：

的@NgModule(...)列表

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

在你的html中使用它：

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

此管道将严格检查具有name属性精确值的项目。如果您要过滤包含过滤后的值其名称中的项目，则必须更改此条件：

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

使用其他内容，取决于您的要求......也许.indexOf()

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

1 个答案: